03.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);
- 例如:
- 使用核心函数将DOM对象包装起来
- jQuery对象转DOM对象
- 使用数组下标
- 例如将上面的jQuery对象再转换为DOM对象
- var btnEle = $btnEle[0];
- 例如将上面的jQuery对象再转换为DOM对象
- 使用数组下标
- 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
- 获取所有的复选框
- :text
- :enabled
- 获取可用的元素
- :disabled
- 获取不可用的元素
- :checked
- 获取所有选中的单选按钮和复选框、以及select中所有被选中的option(最好使用:selected选择器获取)
- :selected
- 获取select标签中所有被选中的option
五、常用的方法
- 事件方法
- click()
- 单击事件
- change()
- 内容改变的事件
- click()
- 其他方法
- children()
- 获取子元素
- find()
- 获取后代元素
- parent()
- 获取父元素
- parents()
- 获取祖先元素
- each()
- 用来遍历jQuery对象
- attr()
- 用来获取或设置元素的属性值
- jQuery对象.attr(“属性名”)
- 获取属性值
- jQuery对象.attr(“属性名”,“新值”)
- 设置属性值
- jQuery对象.attr(“属性名”)
- 用来获取或设置元素的属性值
- text()/html()
- 用来获取或设置成对出现的标签中的内容
- jQuery对象.text()
- 获取
- jQuery对象.text(“新的内容”)
- 设置
- html()与text()方法的区别是html()方法可用解析HMLT标签
- jQuery对象.text()
- 用来获取或设置成对出现的标签中的内容
- val()
- 用来获取或设置input标签/select标签的value属性值
- jQuery对象.val()
- 获取value属性值
- jQuery对象.val(“新值”)
- 设置value属性值
- jQuery对象.val()
- 用来获取或设置input标签/select标签的value属性值
- children()