jQuery文档结构图
加入jQuery
- jQuery优势
轻量／强大的选择器／出色的DOM操作的封装／可靠的事件处理机制／完善的Ajax／不污染顶级变量／出 色的浏览器兼容性／链式操作方式／隐式迭代／行为层与结构层的分离／插件／文档／开源
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 等待所有内容加载完毕后执行 | ＤＯＭ结构加载完之后就可以执行 |
| 编写个数 | 一次只能执行一个，同时编写多个时执行最后一个 | 可以多个同时执行 |
| 简化写法 | 无 | $(function(){ }); |
jQuery对象和DOM对象 jQuery选择器与css选择器
- jQuery对象是通过jQuery包装DOM对象后产生的对象
jQuery不能使用DOM的方法，DOM也不能使用jQuery的
1. jQuery—>DOM
- jQuery对象是一个类似数组的对象，通过【index】
var $cr = $("#cr"); //jquery对象 var cr = $cr[0]; //DOM对象 - 本身的get(index)方法
var cr = $cr.get(0);
2. DOM—>jQuery
使用$()将DOM对象包起来即是jQuery对象
- jquery选择器与css选择器的写法十分类似，但作用效果不同
- css是找到元素后添加样式
- jQuery是找到样式之后添加行为
jQuery中涉及操作css样式的部分比单纯的css功能更强大，拥有跨浏览器的兼容性
jquery选择器
- 使用jQuery获取网页内不存在的元素也不会报错。
$("#idName")获取到的是对象，检查是否存在用$("#idName"),length > 0或者转化为ＤOM对象
基本选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 单个 | $(“#test”) | |
| .class | 集合 | $(“.test”) | |
| element | 根据给定的元素名匹配元素 | 集合 | $(“p”) |
| * | 匹配所有元素 | 集合 | $(“*”) |
| selector1,…selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合 | $(“div,span” ) |
层次选择器
| 选择器 | 描述 | 返回 |
|---|---|---|
| $(“div span”） | 选取div元素里所有span元素 | 集合 |
| $(“div > span”) | 选取div元素下元素名为span的子元素 | 集合 |
| $(“.one + div”) | 选取class为one的下一个div同辈元素 | |
| $(“.one ~ div”) | 选取class为one的元素后面的所有的div同辈元素 | 集合 |
$("div + span")等价于$("div").next("span")$("div ~ span")等价于$("div").nextAll("span")获取所有div后面的同辈的span元素
$("div").siblings("span")获取div所有同辈元素，无论位置前后
过滤选择器
规则与css中的伪类选择器语法相同，都以一个冒号开头
- 基本过滤选择器
：frist，: even,: eq(index),: gt(index),:header(),:animated选取正在执行动画的所有元素,:focus选取当前获取焦点的元素 - 内容过滤选择器
：contains（text）,:empty,:has(selector),:parent - 可见性过滤选择器
:hidden,:visible - 属性过滤选择器（使用方括号）
[attribute] - 子元素过滤选择器
：eq(index)只匹配一个元素，而：nth-child将为每一个父元素匹配子元素，并且：nth-child(index)的index是从1开始的，而:eq(index)是从0开始的 - 表单对象属性过滤选择器
：enable，：disabled,:checked,:selected - 表单选择器
:input选取所有<input><textarea><select><button>
:text选取所有的单行文本框
：password选取所有的密码框
：radio，：checkbox，：submit，：reset，：button，：file,：hidden
注意
1.选取器中含有特殊字符时，需要进行转义
1 | <div id="id#b">-----$("#id\\#b"); //转义# |
2.jQuery1.1.0版本中的@
3.选择器中的空格问题
- $(‘.test :hidden’) 带空格，选取class为test的元素里面的隐藏元素
- $(‘.tst:hidden’) 不带空格 选取隐藏的class为test的元素