JQuery

JQuery:

1.核心函数的四个作用

• 1）$(function(){})
  • 当文档加载完成之后才执行函数中的内容
• 2）$("选择器")
  • 根据选择器字符串获取元素节点对象
• 3）$("html字符串")
  • 根据html字符串创建对应的元素节点对象
• 4）$(DOM对象)
  • 将DOM对象包装为jQuery对象

2.DOM对象与jQuery对象的转换

• DOM转jQuery
  • 通过$()将DOM对象包起来即可
    • 例如：var $btnEle = $(btnEle);
• jQuery转DOM
  • 通过数组下标
    • 例如：var btnEle = $btnEle[0];
• DOM对象只能调用DOM对象的方法；jQuery对象只能调用jQuery对象的方法。两者不能互调

3.jQuery中常用的选择器

• 基本选择器
  • ID选择器：#id属性值
  • 类选择器：.class属性值
  • 元素选择器：html标签
  • 获取所有的元素：*
  • 分组选择器：使用逗号将各个选择器进行分割，如：$("#one,.mini,div")
• 层次选择器
  • 获取后代元素：空格
  • 获取子元素：大于号
  • 获取紧邻的后面的元素：加号
  • 获取后面所有的兄弟元素：波浪线 ~
• 基本过滤选择器
  • :first
    • 获取第一个元素
  • :last
    • 获取最后一个元素
  • :not(selector)
    • 获取不包含某些元素的元素
  • :eq(index)
    • 获取索引为某个值的元素，索引从0开始
  • :lt(index)
    • 获取索引小于某个值的元素
  • :gt(index)
    • 获取索引大于某个值的元素
  • :even
    • 获取索引为偶数的元素
  • :odd
    • 获取索引为奇数的元素
• 内容过滤选择器
  • :contains(text)
    • 获取包含某些文本元素
  • :has(selector)
    • 获取包含某些元素的元素
• 可见性过滤选择器
  • :hidden
    • 获取不可见的元素
    • 不可见分两种情况：①元素的display属性为none②input中的type属性值为hidden（我们称为隐藏域）
• 属性过滤选择器
  • [attribute]
    • 获取包含某些属性的元素
  • [attribute=value]
    • 获取属性等于某些值的元素
• 表单
  • 通过这些选择器我们可以快速的获取文本框，密码框，单选按钮，复选框等，如：
    • :text
      • 获取所有的文本框
    • :password
      • 获取所有的密码框
    • :radio
      • 获取所有的单选按钮
    • :checkbox
      • 获取所有的复选框
• 表单对象属性选择器
  • :enabled
    • 获取所有可用的元素
  • :disabled
    • 获取所有不可用的元素
    • 当元素的disabled属性值为disabled（true）时，该元素就是一个不可用的
  • :checked
    • 获取所有被选中的单选按钮和复选框
  • :selected
    • 获取所有下拉列表中被选中的option

4.jQuery中常用的方法

• text()
  • 获取或设置成对出现的元素中的文本值
  • 元素对象.text()：获取文本值
  • 元素对象.text("new value")：设置文本值
  • 它与html()方法的区别是html()方法可以解析html标签，它只能获取文
    

• val()
  • 获取或设置元素的value属性值
  • 元素对象.val()：获取value属性值
  • 元素对象.val("new value")：设置value属性值
• attr()
  • 获取或设置元素的属性值
  • 元素对象.attr("属性名")：获取属性值
  • 元素对象.attr("属性名","属性值")：设置属性值
  • 元素对象.attr({属性名1:"属性值1",属性名2:"属性值2"})：设置多个属性值
  • css()方法与该方法类似
• append()
  • 向元素中追加内容
• remove()
  • 删除元素
• children()
  • 获取子元素
• find()
  • 获取后代元素
• parent()
  • 获取父元素
• parents()
  • 获取祖先元素

• each()
  • 遍历元素对象
• length和size()
  • 获取元素的个数

5.常用的事件

• click()
  • 单击事件
• change()
  • 元素中的内容改变时触发的事件

1）$(function(){})

当文档加载完成之后才执行函数中的内容
2）$("选择器")
根据选择器字符串获取元素节点对象
3）$("html字符串")
根据html字符串创建对应的元素节点对象
4）$(DOM对象)
将DOM对象包装为jQuery对象）$(function(){})
当文档加载完成之后才执行函数中的内容
2）$("选择器")
根据选择器字符串获取元素节点对象
3）$("html字符串")
根据html字符串创建对应的元素节点对象
4）$(DOM对象)
将DOM对象包装为jQuery对象