Python攻城师的成长————DOM操作标签、事件绑定、jQuery框架

• 熟悉学习DOM操作标签、事件绑定、jQuery框架的内容。

• 今日学习目标
• 学习内容
• 一、DOM操作标签
• • 动态添加标签
  • 获取值操作
  • 属性操作
• 二、事件绑定
• • 事件简介
  • 事件案例
  • • 数据校验
    • 搜索框案例
    • 省市联动
• 二、 jQuery框架
• • 简介
  • 查找标签
  • • 筛选器方法

• DOM操作标签

• 事件绑定

• jQuery框架

举例：

var aEle = document.createElement('a')  # 创建a标签
aEle.href = 'https://www.sogo.com/'  # 设置href属性
aEle.innerText = '点我去搜狗'  # 设置文本内容
var divEle = document.getElementById('d1')  # 查找标签
divEle.append(aEle)  # 内部追加标签

• 标签默认属性设置
  比如 id、class等 设置的时候可以直接通过点的方式

  divEle.id = 'd1'
  

• 标签自定义属性设置
  比如 username password 等 设置的时候需要使用setAttribute

  divEle.setAttribute('username','jason')
  

总结：
setAttribute()既可以设置自定义属性也可以设置默认属性
所以一般情况下都是使用setAttribute()去设置所有属性

• innerText与innerHTML区别

  1. 获取值的时候

     innerText只会获取文本内容
     innerHTML获取文本和标签
     

  2. 设置值的时候

     innerText不识别标签语法 
     innerHTML识别标签语法
     

获取值主要是去在前端方面做一些简单的数据显示与判断，通常都是使用input、option、textarea等标签。

1. 获取普通值数据
   标签对象.value
2. 获取文件数据
   标签对象.value # 只能获取到文件路径 没啥用
   标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象

• 类属性操作
  标签对象.classList # 查看所有的类属性
  标签对象.classList.add() # 添加类属性
  标签对象.classList.remove() # 移除类属性
  标签对象.classList.contains() # 判断是否含有某个类属性
  标签对象.classList.toggle() # 有则移除 无则添加

• 样式操作
  标签对象.style.属性名

  divEle.style.height = '800px'
  

达到某个条件 自动触发的功能

• 如何给标签绑定事件

  1.在DOM元素中直接绑定；

  2.在JavaScript代码中绑定；

  3.绑定事件监听函数；

• 在DOM元素中直接绑定
  这里的DOM元素可以理解为HTML标签。JavaScript支持在HTML标签中直接绑定事件，语法如下：

  onXX = “JavaScript Code”;

  其中：

  onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

  JavaScript Code为处理事件的JavaScript代码，一般是函数。
  例如，单击一个按钮，弹出一个警告框的代码有如下两种写法
  1.原生函数

  点击我，弹出警告框
  

  2.自定义函数

  点击我，弹出警告框
  
  

• 在JavaScript代码中绑定

  在JavaScript代码中（即< script>标签或js文件内）绑定事件可以使JavaScript代码与HTML分离、文档结构清晰、便于管理和开发。

  在JavaScript代码中绑定事件，语法如下：

  elementObject.onXX = function () {
    // 事件处理代码
  }
  

  其中：

  elementObject为DOM对象，即DOM元素。

  onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

  例如，为一个id="demo"的按钮绑定一个onclick事件，显示它的name属性

  1.匿名函数绑定

  点击我，弹出name值
  
  

  2.函数名绑定

  点击我，弹出name值
  
  

• 绑定事件监听函数

  绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。
  addEventListener()函数语法：

  elementObject.addEventListener(eventName, handle, useCapture);
  

  参数说明

  • elementObject
    DOM对象（即DOM元素）。
  • eventName
    事件名称（注意：这里的事件名称没有on，如鼠标点击事件click）。
  • handle
    事件句柄函数，即用来处理事件的函数。
  • useCapture
    Boolean类型，是否使用捕获，一般用false，与事件流相关。

  attachEvent()函数语法：

  elementObject.attachEvent(eventName, handle);
  

  参数说明

  • elementObject
    DOM对象（即DOM元素）。
  • eventName
    事件名称（注意：这里的事件名称有on，如鼠标点击事件onclick）。
  • handle
    函数名(不带小括号)，即用来处理事件的函数。

注意

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、Firefox、Opera、Safari、IE9及其以上版本都支持该函数；但是，IE8及其以下版本不支持改函数，它使用attacheEvent()来绑定事件监听函数。所以，这种绑定方法，必须要处理浏览器兼容问题。

总结

• 在JavaScript中，有三种常用的事件绑定的方法：

  1.在DOM元素中直接绑定；

  2.在JavaScript代码中绑定；

  3.绑定事件监听函数。

• 除了直接第一种直接在DOM元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。

• 事件函数中有一个固定的关键字 this指代当前被操作对象本身

获取用户名和密码 校验是否符合 并暂时相应提示

username:
  
    

password:
    
    

省市:





市区:

1. 兼容多浏览器
   IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2. 封装了js代码
   核心代码也就几十KB 加载速度快 极大的提升编写效率
3. 宗旨
   “Write less, do more.”
4. Ajax交互
   异步提交 局部刷新(django部分再学)

• 版本区别
  1.x:兼容IE678
  2.x:不兼容IE678
  3.x:不兼容IE678 学习直接使用最新版即可

• 下载使用方式
  下载地址:https://jquery.com/
  jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
  jQuery本身就是一个js文件 里面写了一些js代码而已

• 导入方式

  1.本地jQuery文件
  不会收到网络影响
  2.CDN加速服务
  需要确保有互联网
  min.js 压缩之后的文件 容量更小
  .js 没有压缩的文件 容量稍大

• 基本使用举例
  jQuery框架与基础JS语法比较

  将页面上的两个p标签文本内容一个变成红色 一个变成绿色

  • 原生的js代码

    let p1Ele = document.getElementsByTagName('p')[0]
    let p2Ele = document.getElementsByTagName('p')[1]
    p1Ele.style.color = 'red'
    p2Ele.style.color = 'green'
    

  • jQuery代码

    $('#d1').css('color','red').next().css('color','green')
    

• 基本选择器

  $('#d1')  # id选择器  
  $('.c1')  # class选择器  
  $('p')  # 标签选择器
  $('div#d1')
  $('div,#d1,.c1')
  $("x y")		// x的所有后代y（子子孙孙）
  $("x > y")	// x的所有儿子y（儿子）
  $("x + y")	// 找到所有紧挨在x后面的y
  $("x ~ y")	// x之后所有的兄弟y
  

• 基本筛选器

  $('ul li:first')
  $('ul li:last')
  $('ul li:not(li)')
  $('ul:has(#d1)')  # 查看内部含有id是d1的ul标签
  

• 属性选择器

  $('[name]')
  $('[name="jason"]')
  $('div[name="jason"]')
  

• 表单筛选器:
  专门针对form表单内的标签

  $('input[type="text"]')	 筛选器简化	$(':text')
  $(':checked') 会将option也找到
  $(':selected')  只会找到option标签
  

• 同级别往下查找

  $("#id").next()
  $("#id").nextAll()
  $("#id").nextUntil("#i2")
  

• 同级别网上查找

  $("#id").prev()
  $("#id").prevAll()
  $("#id").prevUntil("#i2")
  

• 查找父标签

  $("#id").parent()
  $("#id").parents() 
  $("#id").parentsUntil() 
  

• 查找儿子和兄弟

  $("#id").children();// 儿子们
  $("#id").siblings();// 兄弟们(同级别上下所有标签)
  

补充：

• 链式操作

  $('#d1').parent().parent().parent()
  $('#d1').parent().parent().next().parents()
  

  一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
  核心:
  对象在调用完一个方法之后返回的还是一个对象