jQuery 选择器

常用JS框架

jQuery

DOJO

Ext JS

Prototype

jQuery 框架理念 ： WRITE LESS,DO MORE

jQuery 1.4 企业主流版本，从jQuery1.6 开始引入大量新特性 ，最新版本 1.8.3

jQuery 提供 jquery-1.8.3.js 和 jquery-1.8.3.min.js

jquery-1.8.3.js jQuery框架源码，没有被精简，体积较大 （主要用来研究 jQuery源码），企业开发时，需要导入 jquery-1.8.3.min.js （精简过）

window.onload = function() {...} 使用jquery $(document).ready(function(){...});

一、jQuery 入门

核心函数 jQuery() 用法有四个

1、jQuery(callback) // 页面onload 函数

2、jQuery(expression, [context]) // 查找指定对象 ------ 九种选择器

3、jQuery(elements) // 将dom对象转换为jQuery对象

* document 是DOM对象 jQuery(document) 成为了jQuery对象

4、jQuery(html, [ownerDocument]) // 将html转换jQuery对象

* jQuery("<p>hello</p>") ----- 得到 jQuery对象

在这里 请记住第一种用法

jQuery 别名就是 $ 所以 jQuery(callback) 等价于 $(callback)

* 使用jQuery可以一次绑定多个onload函数，而传统模式只能绑定一个onload函数

二、什么是jQuery对象

一种jQuery框架内部特有的对象结果，可以使用jQuery提供方法，将DOM对象 通过jQuery()函数包装，成为jQuery对象

jQuery对象无法使用DOM对象属性方法

DOM对象也无法使用jQuery对象属性方法

jQuery对象类似一个DOM对象数组，数组第一个元素就是 DOM对象

DOM --- jQuery对象 $jQuery对象 = $(DOM对象)

jQuery对象 --- DOM对象 DOM对象 = $jQuery对象[0] 也可以写为 DOM对象 = $jQuery对象.get(0);

三、jQuery选择器

常规选择语言基于CSS3 规范

jQuery(expression, [context]) 在核心函数jQuery中传入 表达式，对页面中元素进行选择

1、基本选择器

根据元素id属性、class属性、元素名称 对元素进行选择

ID选择器 $("#元素id属性")

CLASS选择器 $(".元素class属性")

元素名称选择器 $("元素名称")

多个选择器同时使用 selector1,select2 例如 ： $("#xxid ,.xxxclass") 同时选择 id 和 class匹配两类元素

2、层级选择器

根据祖先、后代、父子关系、兄弟关系 进行选择

ancestor descendant 获取ancestor元素下边的所有元素 $("form input")

parent > child 获取parent元素下边的所有直接child 子元素 $("form > input")

prev + next 获取紧随pre元素的后一个兄弟元素 $("label + input")

prev ~ siblings 获取pre元素后边的所有兄弟元素 $("form ~ input")

3、基本过滤选择器

:first 选取第一个元素 $("tr:first")

:last 选取最后一个元素 $("tr:last")

:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")

:even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even") ----- 选取奇数元素

:odd 选取所有元素中奇数索引的元素 ，从 0 开始计数 $("tr:odd") ------ 选取偶数元素

:eq(index) 选取指定索引的元素 $("tr:eq(1)")

:gt(index) 选取索引大于指定index的元素 $("tr:gt(0)")

:lt(index) 选取索引小于指定index的元素 $("tr:lt(2)")

:header 选取所有的标题元素 如：h1, h2, h3 $(":header")

:animated 匹配所有正在执行动画效果的元素

4、内容过滤选择器

内容选择器是对子元素和文本内容的操作

:contains(text) 选取包含text文本内容的元素 $("div:contains('John')") 文本内容含有john 的所有div

:empty 选取不包含子元素或者文本节点的空元素 $("td:empty") td元素必须为空

:has(selector) 选取含有选择器所匹配的元素的元素 $("div:has(p)").addClass("test"); 含有p子元素的div

:parent 选取含有子元素或文本节点的元素 $("td:parent") 所有不为空td元素选中

5、可见性过滤选择器

根据元素的可见与不可见状态来选取元素

:hidden 选取所有不可见元素 $("tr:hidden")

:visible 选取所有可见的元素 $("tr:visible")

6、属性过滤选择器

通过元素的属性来选取相应的元素

[attribute] 选取拥有此属性的元素 $("div[id]")

[attribute=value] 选取指定属性值为value的所有元素

[attribute !=value] 选取属性值不为value的所有元素

[attribute ^= value] 选取属性值以value开始的所有元素

[attribute $= value] 选取属性值以value结束的所有元素

[attribute *= value] 选取属性值包含value的所有元素

7、子元素过滤选择器

对某元素中的子元素进行选取

:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始 区别 eq

:first-child 选取第一个子元素

:last-child 选取最后一个子元素

:only-child 选取唯一子元素，它的父元素只有它这一个子元素

8、表单过滤选择器

选取表单元素的过滤选择器

:input 选取所有<input>、<textarea>、<select >和<button>元素

:text 选取所有的文本框元素

:password 选取所有的密码框元素

:radio 选取所有的单选框元素

:checkbox 选取所有的多选框元素

:submit 选取所有的提交按钮元素

:image 选取所有的图像按钮元素

:reset 选取所有重置按钮元素

:button 选取所有按钮元素

:file 选取所有文件上传域元素

:hidden 选取所有不可见元素

9、表单对象属性过滤选择器

选取表单元素属性的过滤选择器

:enabled 选取所有可用元素

:disabled 选取所有不可用元素

:checked 选取所有被选中的元素，如单选框、复选框

:selected 选取所有被选中项元素，如下拉列表框、列表框

对象访问核心方法 ： each(function(){}) 遍历集合 、size()/length属性 返回集合长度 、index() 查找目标元素是集合中第几个元素

CSS样式操作 ： css(name,value) css({name:value,name:value}); 同时修改多个CSS样式

基本过滤选择器与 筛选过滤 API功能是相同

$("tr:first") 等价于 $("tr").first()

哪些元素属于 不可见元素， 可以被 :hidden 选中 ？

css样式 display:none

<input type="hidden" />

****** visibility:hidden 元素不能被:hidden选中

九种选择器重点 ：

一、基本选择器和层级选择器 锁定元素

二、使用属性过滤选择器和内容过滤选择器 具体选中元素

三、表单操作 :checked :selected 选中 表单选中元素

配置基本过滤选择器，缩小选中的范围

-----------------------------------------------------------------------------------------------------------------------------

四、jQuery DOM操作

1、 查询

children([expr]) 获取指定的子元素

find(expr) 获取指定的后代元素

parents([expr]) 获得祖辈元素

parent() 获取父元素

next([expr]) 获取下一个兄弟元素

prev([expr]) 获取前一个兄弟元素

siblings([expr]) 获取所有兄弟元素

在XML 解析中 find 方法使用最多

** 对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象

2、属性操作

设置属性 attr(name,value)

读取属性 attr(name)

同时设置多个属性 attr({name:value,name:value... });

attr("checked","true") 等价于 prop("checked")

3、CSS操作

attr('style','color:red'); // 添加style属性

css(name, value) 设置一个CSS样式属性

css(properties) 传递key-value对象，设置多个CSS样式属性

addClass(class) 添加一个class属性

removeClass([class]) 移除一个class属性

toggleClass(class)如果存在（不存在）就删除（添加）一个类

4、HTML代码、文本、值操作

html() 读取innerHTML

html(content) 设置innerHTML

text() 读取文本内容

text(content) 设置文本内容

val() 读取元素value属性

val(content) 设置元素value属性

设置 val控制radio select checkbox 选中

$("#city").val("广州");

$("input[name='gender']").val(['女']);

5、jQuery添加元素

创建元素 拼接好HTML代码片段 $(html片段) ---- 产生jQuery对象

添加元素

$node.append($newNode) 内部结尾追加

$node.prepend($newNode) 内部开始位置追加

$node.after($newNode) 在存在元素后面追加 -- 兄弟

$newNode.insertBefore($node) 在存在元素前面追加

6、jQuery删除元素

选中要删除元素.remove() ---- 完成元素删除

选中要删除元素.remove(expr) ----- 删除特定规则元素

remove删除节点后，事件也会删除

detach删除节点后，事件会保留 从1.4新API

7、jQuery元素复制和替换

$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件

$(“p”).clone(true); 克隆节点，保留原有事件

$("p").replaceWith("<b>hello</b>"); 将所有p元素，替换为"<b>hello</b>“

$(“<b>hello</b>”).replaceAll(“p”); 与replaceWith相反

----------------------------------------------------------------------------------------------------------------------------------------

五、jQuery事件

1、事件绑定

传统js 一般一个对象只能绑定 某种事件 一个函数

jQuery 支持对同一个对象，同一个事件 可以绑定多个函数

绑定事件函数到对象有两种写法

写法一

$("div").click(function(){

...

);

写法二

$("div").bind("click",function(){

...

});

取消绑定 $("div").unbind("click");

*** live 为满足条件对象，实时追加绑定 、取消live事件 die方法

2、事件一次性绑定和 自动触发

一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效

触发事件 trigger(type, [data]) 触发目标对象指定的事件执行

3、事件切换

hover(mouseover,mouseout) 模拟鼠标悬停事件

toggle(fn1,fn2,fn3...) ; 鼠标点击一次 触发一个函数

4、事件 阻止默认动作和传播

$("a").click(function(event){

event.preventDefault();

// do something

});

$("p").click(function(event){

event.stopPropagation();

// do something

});