jQuery选择器

在jQuery选择器的代码编写过程中，JQ中选择页面元素和CSS是一致的

选择元素

$(“#app”)                      选择id为app的元素
$(“.sp”)                         选择class值为sp的元素
$(“h1”)                          选择标签名为h1的元素

---

基本过滤器

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	集合元素	$(“tr:lt(1)”)选择表格行索引小于1的行
:header	所取所有的标题元素,h1~h6	集合元素	$(“:header”)选择网页中所有的<h1>,<h2>…<h6>
:animated	选择当前正在执行动画的所有元素	集合元素	$(“div:animated”)选择正在执行动画的div元素

---

内容过滤器

选择器	描述	返回值	示例
:contains(text)	选择含有text文本内容的元素	集合元素	$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty	选择不包含子元素或文本的空元素	集合元素	$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)	选择包含有(E1选择器匹配的元素)的所有元素	集合元素	$(“div:has(p)”)选择含有p元素的所有div元素
:parent	选择含有子元素或文本的元素	集合元素	$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

---

可见过滤器

选择器	描述	返回值	示例
:hidden	选择所有不可见元素	集合元素	$(“:hidden”)选择所有不可见元素，包括：<input type=“hidden”/>,<div style=“display:none”>和<div style=“visibility:hidden”>等，如果只选择<input>元素，则可以使用 $(“input:hidden”)
:visible	选择所有可见元素	集合元素	$(“div:visible”)选取所有可见的div元素

---

内容操作

                操作元素中的内容：

                设置：

                .html(“str”)   设置元素的里面的内容 可用带html标签

                .text(“str”)    设置元素的里面的内容 可用不带html标签

                .val(“str”)     设置表单的值

                获取

                .html()       .text()        .val()

---

内 容 操 作 区 别

.html(),.text()和.val()的差异总结： 

 .html()是用来读取元素的html内容（包括html标签），

.text()用来读取元素的纯文本内容，包括其后代元素，

.val()是用来读取表单元素的"value"值。

        内容操作

                jQ 事件和js的事件名称是一致的，事件名不带on
                $(“button”).click(function(){
                // 事件操作
                })

---

JQ中显示隐藏对象

// $(".block").hide()      隐藏

// $(".block").fadeOut();    淡出

// $(".block").slideUp();  向上滑出

// $(".block").show();   显示

// $(".block").fadeIn();   淡入

// $(".block").slideDown();  向下滑入

// $(".block").fadeToggle();    切换淡入淡出

$(".block").slideToggle("slow");   //切换滑入滑出

高级用法：速度与回调函数

fadeIn(speed,[callback] )    

---

样式操作

1.设置单条样式

        .css(“属性名”，”属性值”)

2.设置多条样式

        .css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

3.获取样式值

        .css(“属性名”)

---

类操作

1.增加类      可增加/删除多个类

        .addClass(“类名1 类名2 ……”)   多个类名之间用空格隔开

2.删除类

        .removeClass(“类名”)

        .toggleClass(“”)   

        .toggleClass(“类名”,true/false)    用来判断样式类添加还是移除的 布尔值

---

属性操作

获取属性      获取元素的属性

attr("属性名");    .attr(“title”) 获取元素的title属性

设置属性

.attr(“属性名”,”属性值”)

.attr(“title”,”我爱敲代码”)   设置元素的title属性为“我爱敲代码”

---

表单属性操作prop

prop(name|properties|key,value|fn)

获取在匹配的元素集中的第一个元素的属性值。

获取属性      获取元素的属性

prop("属性名");    .prop(“checked”) 获取表单的选中属性

设置属性

.prop(“属性名”,”属性值”)

.attr(“disabled”,”true”)   设置表单元素不可用

目录

选择元素

基本过滤器

内容过滤器

可见过滤器

内容操作

内 容 操 作 区 别

内容操作

JQ中显示隐藏对象

样式操作

类操作

属性操作

表单属性操作prop

---