jQuery 选择器 整理

一、 css选择器

1.查找元素的方法按照
$app1 = $("#app")/$(".app")/$("div/li/ul");
形式来写


2.支持多级查询:
形式大概在:
$app1 = $("#app,.app1,#app2")
$app1 = $(".app>app1")//子代选择器
$app1 = $("#app app1")//后代选择器
3.用jq给css 添加样式


css()
$app.css("background","red")
4.current 当前

5 .next() 返回后一个同级元素

<li class="app12"></li>
<li class="app13"></li>

$(".app12").next();

这个返回的实际上就是第二个li;
6.parent()取相应的父元素

<div id='app'>

<li class="app12"></li>
<li class="app13"></li>


</div>

$(".app12").parent();
这个找到的实际上就是#app这个元素
7.siblings() 取同级元素的集合(不包括自己本身)

<li class="app12"></li>
<li class="app13"></li>
<li class="app14"></li>

$(".app12").siblings()
实际上去得的是13,14两个li,它和next()的区别在于 一个是去集合另一个是取一个元素

4. children()取得所有子元素

它可以有参数 结果是取得符合条件的子代元素


<ul id="ul1">一
<li class="li1" id="siblings">1</li>
<li class="li1">2</li>
<li class="li1">3</li>
<li class="li1">4</li>
<li class='li2'></li>
</ul>
$("#ul1").children().css('background',"red");//取得的是前四个
$("#ul1").children('.li2').css("background","yellow"//取得是最后一个

5.remove()

6.toggleClass() 函数

<div id="app" class="div1">

</div>
没有类则是创建一个类,如果有则反选。
例如$("#app").toggleClas(“div1“);
7.:eq()选择器

例如

var $app = $(".app:eq(0)").html();
eq选择类名是 app的dom元素中的某一个 ,这个是指从0 开始到n-1
传-1取得是最后一个dom元素。



html()函数,是jq的语法,不穿函数的时候用来取得这个dom函数的值,传值的时候会覆盖原有的html结构可以是<li></li>这种东西。
执行的东西应该是一个$元素,而不是一个$数组
8.:even

例如
var $app = $(".app:even").css("background,red");

这个函数选择的是所有奇数的dom元素,1,3,5,7,需要注意的是这个肯定会回传一个数组,所以不能使用像html()这种只能操作一个的函数。

9.属性选择器:

<ul>
<li name="aa">1</li>
<li name="aabb">2</li>
<li name="bbaa">3</li>
<li name = "aa-bb">4</li>
</ul>
1.var $xianshi = $("#app ul li[name=aa]").css("background","red");//选中属性值也就是name 等于aa 的dom元素 也就是第一个
2.var $xianshi = $("#app ul li[name*=aa]").css("background","red");//选中所有含有aa的元素 三个都有
3.var $xianshi = $("#app ul li[name~=aa]").css("background","red");
选中 含有aa这个单词的元素?
4. var $xianshi = $("#app ul li[name$=aa]").css("background","red")//
选中以aa为结尾的 dom元素
5. var $xianshi = $("#app ul li[name^=aa]").css("background","red")//
选中以aa为开头的dom元素
6.var $xianshi = $("#app ul li[name!=aa]").css("background","red")//
选中不含有aa 的dom元素
7.var $xianshi = $("#app ul li[name|=aa]").css("background","red")
//选中以aa 为前缀的dom 元素?


10.
1.$("#div h1:first-child")
这句话的意思是选中div下面的第一个孩子而且必须是h1。
2.$("#div h1:first of type")
选中div下第一个类型是h1的dom 元素
3.$("#div h1:nth-child(2n)")选择所有偶数
4.$("#div h1:nth-child(2n+1)")选择所有奇数
二jq 扩展选择器

1.:animated

选择正在执行动画效果的dom元素

$("div:animated").toggleClass("colored");

2.eq()选择器

例如

var $app = $(".app:eq(0)").html();
eq选择类名是 app的dom元素中的某一个 ,这个是指从0 开始到n-1
传-1取得是最后一个dom元素。



html()函数,是jq的语法,不穿函数的时候用来取得这个dom函数的值,传值的时候会覆盖原有的html结构可以是<li></li>这种东西。
执行的东西应该是一个$元素,而不是一个$数组
3.:even

例如
var $app = $(".app:even").css("background,red");

这个函数选择的是所有奇数的dom元素,1,3,5,7,需要注意的是这个肯定会回传一个数组,所以不能使用像html()这种只能操作一个的函数。

4.:odd
var $app = $(".app:odd").css("background,red");
选择所有偶数的dom元素。

5.:first

var $app = $(".app:first").css("background","red");

匹配第一个元素

6. :gt(index)

var $div1 =$("#div1 li:gt(0)");
$div1.each(function(){
$(this).css("background","green");
});
索引从零开始,所以这个是操作所有大于index(0+1)的元素。

7.:header

var $div1 = $("div1:header")

选择所有header标题元素 类似于h1,h2,h3,h4。

8.:lang(lang)
$( "div:lang(es-es)" ).addClass( "spain" );
选择指定语言的所有元素
对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。

9.:last

$("div:last").css("background","red");
选择最后一个div

10.:it(index)

var div1 = $("div:it(0)");
$div1.each(function(){
$(this).css("background","green");
});

用于操作所有小于index+1的dom元素。

11.:not(selector)
$("input:not(:checked) + span").css("background-color", "yellow");

选择除了选定元素之外的其他元素。不推荐使用没有.not()好用。

12.:html

选择该文档的根元素

在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素
13.:target

选择由文档URI的格式化识别码表示的目标元素

如果文档的URI包含一个格式化的标识符,或hash(哈希), 然后:target选择器将匹配ID和标识符相匹配的元素。 例如,给定的URI http://example.com/#foo, $( "p:target" ),将选择<p id="foo">元素。


14.:empty
var $div1 = $("#div1 li:empty").css("background","red");
选择空元素的jq元素
15:contains(text)

var $div1 = $("#div1 li:contains(2)").css("background","red");

选择内容中含有text 的所有jq元素

15.:parent

var $div1 = $("#div1 li:parent").css("background","red");
选择任何有子元素或者文本的父元素

16.:hidden
选中所有隐藏元素

17.:visible

选中所有可见元素

18.:button

选中所有按钮

19.:checkbox

选中所有复选框的jq元素

20.:checked

<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
$(":checked").val("haha")

选择所有被选中的单选框,并且单选框不能添加背景和边框,用于单选框和复选框,下拉框用:selected

21.js 对象

分三种{
1.内置对象
2.dom对象
3.自定义对象

}

jq对象 就是个自定义对象,但可以当做数组来操作。

22. dom 对象和jq 对象互换

1.dom对象 换成jq 对象

var oBtn = document.getElementById('app');

$btn = $("oBtn")
console.log($btn);
2.jq 对象转成 dom 对象

两种方式

1..get(0) 因为jq 对象相当于一个数组

var $Btn = $("#app");
console.log($Btn.get(0));

或者

console.log($Btn[0]);



23.API 函数 就是那些语法

24.js 命名规范

1.o 代表原生的
2.$代表jq 对象

25.属性选择器:

<ul>
<li name="aa">1</li>
<li name="aabb">2</li>
<li name="bbaa">3</li>
<li name = "aa-bb">4</li>
</ul>
1.var $xianshi = $("#app ul li[name=aa]").css("background","red");//选中属性值也就是name 等于aa 的dom元素 也就是第一个
2.var $xianshi = $("#app ul li[name*=aa]").css("background","red");//选中所有含有aa的元素 三个都有
3.var $xianshi = $("#app ul li[name~=aa]").css("background","red");
选中 含有aa这个单词的元素?
4. var $xianshi = $("#app ul li[name$=aa]").css("background","red")//
选中以aa为结尾的 dom元素
5. var $xianshi = $("#app ul li[name^=aa]").css("background","red")//
选中以aa为开头的dom元素
6.var $xianshi = $("#app ul li[name!=aa]").css("background","red")//
选中不含有aa 的dom元素
7.var $xianshi = $("#app ul li[name|=aa]").css("background","red")
//选中以aa 为前缀的dom 元素?


26.
1.$("#div h1:first-child")
这句话的意思是选中div下面的第一个孩子而且必须是h1。
2.$("#div h1:first of type")
选中div下第一个类型是h1的dom 元素
3.$("#div h1:nth-child(2n)")选择所有偶数
4.$("#div h1:nth-child(2n+1)")选择所有奇数
27. 我有一个ul 里面各种LI li不确定多少个,把他横过来,根据设备宽度不同,间隙相同,所有li 均分,第一列在最左边 ,最后一列在最右边......

1. 检测不同的设备用css3响应式设计
28.each()函数
var $div1 =$("#div1 li");
$div1.each(function(){
$(this).css("background","green");
});
用来遍历jq元素但是需要用this来指向,并且那个$一定不要忘,是$(this)并不是this。
30..val(value)函数
想一个jq元素中添加value 属性 value=value(自己设的东西)。
31.1.toggle 函数
不传参数的时候
toggle();
$app.toggle();
改变这个元素的显示或者隐藏
toggle可以传递一个函数来控制是隐藏还是显示
$app.toggle(true);
这个参数是一个布尔值

猜你喜欢

转载自blog.csdn.net/supreme_yes/article/details/80041327