jQuery

一、简介

• jQuery是为了简化JavaScript开发而生的一个建容多浏览器的、轻量级的JavaScript库
• 使用jQuery需要在页面中引入jQuery的js库（一个js文件）
• jQuery的宗旨：Wirte less,do more

二、核心函数的四个作用

• 1.核心函数中传入function
  • 相当于window.οnlοad=function(){}，当整个文档加载完成之后才执行函数中的内容
• 2.核心函数中传入选择器字符串
  • 根据选择器字符串查找元素节点对象
• 3.核心函数中传入HTML字符串
  • 根据HTML字符串创建元素节点对象
• 4.核心函数中传入DOM对象
  • 将DOM对象转换为jQuery对象

三、DOM对象与jQuery对象之间的转换

• DOM对象转jQuery对象
  • 使用核心函数将DOM对象包装起来
    • 例如：
      • DOM对象：var btnEle = document.getElementById(“btnId”);
      • 转jQuery对象：var $btnEle = $(btnEle);
• jQuery对象转DOM对象
  • 使用数组下标
    • 例如将上面的jQuery对象再转换为DOM对象
      • var btnEle = $btnEle[0];
• DOM对象只能调用DOM对象的方法或属性；jQuery对象只能调用jQuery对象的方法或属性

四、选择器

1.基本选择器

• ID选择器：#id属性值
• 类选择器：.class属性值
• 标签选择器：html标签
• 获取所有元素：*
• 选择器分组：将多个选择器使用逗号分隔，如：$(selector1,selector2,selector3)

2.层级选择器

• 获取后代元素：空格
• 获取子元素：>
• 获取后面紧挨着的兄弟元素：+
• 获取后面所有的兄弟元素：~

3.基本过滤选择器

• :first
  • 获取第一个元素
• :last
  • 获取最后一个元素
• :not(selector)
  • 获取不包含某些元素的元素
• :eq(index)
  • 获取索引为某个值的元素，索引从0开始
• :even
  • 获取索引值为偶数的元素，索引从0开始
• :odd
  • 获取索引值为奇数的元素，索引从0开始
• :gt(index)
  • 获取索引值大于某个值的元素，索引从0开始
• :lt(index)
  • 获取索引值小于某个值的元素，索引从0开始
• :header
  • 获取所有的标题元素

4.内容过虑选择器

• :contains(text)
  • 获取包含某个文本的元素
• :has(selector)
  • 获取包含某些元素的元素

5.可见性过滤选择器

• :visible
  • 获取可见的元素
• :hidden
  • 获取不可见的元素
  • 不可见
    • 1）设置元素样式中display属性值为none
    • 2）input标签中的type属性值为hidden，我们称它为隐藏域

6.表单对象属性过滤选择器

• :input标签的type属性值
  • 可以快速定位不同的表单项
  • 例如：
    • :text
      • 获取所有的文本框
    • :radio
      • 获取所有的单选按钮
    • :checkbox
      • 获取所有的复选框
• :enabled
  • 获取可用的元素
• :disabled
  • 获取不可用的元素
• :checked
  • 获取所有选中的单选按钮和复选框、以及select中所有被选中的option（最好使用:selected选择器获取）
• :selected
  • 获取select标签中所有被选中的option

五、常用的方法

• 事件方法
  • click()
    • 单击事件
  • change()
    • 内容改变的事件
• 其他方法
  • children()
    • 获取子元素
  • find()
    • 获取后代元素
  • parent()
    • 获取父元素
  • parents()
    • 获取祖先元素
  • each()
    • 用来遍历jQuery对象
  • attr()
    • 用来获取或设置元素的属性值
      • jQuery对象.attr(“属性名”)
        • 获取属性值
      • jQuery对象.attr(“属性名”,“新值”)
        • 设置属性值
  • text()/html()
    • 用来获取或设置成对出现的标签中的内容
      • jQuery对象.text()
        • 获取
      • jQuery对象.text(“新的内容”)
        • 设置
      • html()与text()方法的区别是html()方法可用解析HMLT标签
  • val()
    • 用来获取或设置input标签/select标签的value属性值
      • jQuery对象.val()
        • 获取value属性值
      • jQuery对象.val(“新值”)
        • 设置value属性值