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() 用法有四个 

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

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

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

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

4jQuery(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  选取所有元素中偶数索引的元素,从 开始计数 $("tr:even")  ----- 选取奇数元素

:odd  选取所有元素中奇数索引的元素 ,从 开始计数 $("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") 

3CSS操作

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

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

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

addClass(class)  添加一个class属性

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

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

4HTML代码、文本、值操作

html() 读取innerHTML 

html(content) 设置innerHTML

text() 读取文本内容

text(content) 设置文本内容

val() 读取元素value属性

val(content) 设置元素value属性 

设置 val控制radio select checkbox 选中 

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

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

5jQuery添加元素

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

添加元素 

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

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

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

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

6jQuery删除元素

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

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

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

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

7jQuery元素复制和替换 

$(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 

}); 

你可能感兴趣的:(jquery,选择器)