浅谈——jQuery选择器

浅谈——jQuery选择器

小白新作望大神指点–刘桂林 邮箱:1292010349@qq.com

1.属性选择器

//注：使用$()函数时，如果是获取标签，必须使用" “引起来，如果是DOM或者变量都不需要使用” "
以下代码为例

<div></div>
<div class="div0"></div>
<div class="div1"></div>
<div class="div2"></div>
<ul>
    <li></li>
    <li class="lis"></li>
    <li class="lis-1"></li>
    <li class="lis-2"></li>
    <li class="lis-3"></li>
    <li class="lis1"></li>
</ul>
<img src="#" title="img">
<a class="a0" title="links" href="#">超链接</a>
<div class="bn bns"></div>
<div class="bn bn1"></div>
<div class="bn bn2"></div>
<div class="bn5 bn"></div>

title属性标签

$("[title]"); //获取 属性是title属性的标签
$("a[title]"); //标签选择器和属性选择器组合

$("[title='img']"); //判断title标签属性值是img的，这里的=是一个
$("[title=img]");  //作用与上面代码相同，可不写单引号

class属性标签

$("[class^=div]");//class的值是以div起头的
$("[class^='div']");//以上面相同，可以加单引号
$("[class$='0']");//class的值是以0结尾的元素
$("[class|=lis]");//选中class的值是lis或者值是以lis起头并且后面紧跟一个）-元素
$("[class=~bn]");//选中class的类组中包含bn这个类的，也就是说这个类名可能前后有空格
$("[title!=img]");//选中title属性不是img这个值，也包括没有title属性的
$("[title][class][class!=lis]");//多项属性选择器

2.筛选器

以下代码为例
first,first-child,first-of-type的区别

	<ul>
    <li></li>
    <li></li>
    <li class="div0 div1"></li>
    <li class="div0"></li>
    <li class="div0"></li>
    <li class="div0"></li>
    <li></li>
</ul>
<div>
    <span></span>
</div>
<div class="div0">1</div>
<div class="div0">2</div>
<div class="div0">3</div>
<div>4</div>
<script>
	$(".div0:first");//这是可以使用的
	$(".div0:first-of-type");//这是不支持的因为没有父元素
	$("div:first");//这样是可以使 用的
	$("div:first-child");//这是不可以使用的，因为没有父元素
	$(".div0:first-child");//这样也不支持
	
	：not()不包含某些选择器的
	$("li[class!=div0]"); 速度快
	$("li:not([class=div0])");//和上面相同  速度慢
</script>

**按奇偶选择**

	$("li:even");//列表中从0开始的偶数行
	$("li:odd");//列表中从0开始的奇数行

按索引选择

$("li:eq(1)");//列表中索引值所对应的元素
$("li:gt(2)");//列表中索引值是2的向下所有的元素
$("li:lt(2)");//列表中索引值是2的向上所有的元素

其他选择器

$(":header");//h1-h6
$(":animated");//动画选择器
$(":focus");//汇集焦距选择器

$("li").eq(0);等同于$("li:eq(0)")
$("li").first();等同于$("li:first")
$("li").last():同于$("li:first")
$("li").not(["[class~=div0]"]);等同于$("li:not([class~=div0])")

内容过滤器

$("div:empty");//过滤div是空元素；不含有子元素和内容元素

div他的子项中有class是.div0
$(div:has(.div0));//找到的是父级元素，如果某个元素有div0这个class,就回找到它所有父级元素
$("div:parent");//过滤div中是不是空元素的，含有子元素和内容的元素； 与$(div:empty)相反

$("div").has(".div0");等同于$("div:has(.div0)")   前者效率高
$("span").parent();//仅找到当前选择器的父元素
$("span").parents();//找到所有的父元素
$("span").parentsUntil("body");//找到父级元素到某个父级元素为止
$("div:contains('内容')")；  $("div").contains("2")//查找包含指定内容的元素
$("div:hidden");//查找隐藏的元素，主要是针对display:none来使用
$("div:visible");//查找显示的元素
$("li:only-child");//当前项仅为父元素的唯一子项
$("li:nth-child(2)");//有父元素的li列表中的第2个元素
$("li:nth-child(even)");//从1开始的偶数项
$("li:even");//这个是从0开始的

console.log($("li").is(".li0"))//判断列表中有没有class是.li0的元素
console.log($("li").is("#li0"))//判断列表中有没有id是.li0的元素
console.log($("li").hasClass("li0")//判断当前列表中有没有class是.li0，只能判断class，函数中不适用.来说明class名
$(("li").slice(2,5))//从jQuery列表中截取对应的元素

3.text html value html的使用

text
给所有的jQuery对象都写入aaa的字符

$("div").text("aaa")

给每个div写入不同的内容时

 var arr=["北京","上海","广州","武汉","深圳","杭州"];
 $("div").text(function(index,value){
 return arr[index];
 })
 如果容器数量比数组长度短时可使用each
 $.each(arr,function(index,value){
 return (index,value)
 });
 each也可遍历对象
 var obj={a:1,b:2,c:3,d:4};
 $.each(obj,function(prop,value){
 return (prop,value);
 })
 //下面两种样式一样
 $("div").each(function(index,elem){
 console.log(index,elem,this);//这里的this是该DOM对象
 })
 $.each($("div"),function(index,elem){
console.log(index,elem)
})

html

$("div").html("<a herf='#' >内容</a>");//给每个div添加带有超链接的‘内容’
console.log($("div").html());//这里仅获取第一个html内容
当需要给div加入不同的超链接内容时
var arr1=[
            {name:"网易",href:"http://www.163.com"},
            {name:"腾讯",href:"http://www.qq.com"}
        ];
$("div").html(function (index,value){
	if(arr1[index])
	return "<a href='"+arr1[index].href+"'>"+arr1[index].name+"</a>";
	//return `<a href="${arr1[index].href}">${arr1[index].name}</a>`;//用模板字符串表示
	return value
})        
//也可用cech遍历
$.each(arr1,function(index,item){
$("div").eq(index).html("<a href='"+tiem.href+"'>"+item.name+"</a>"")
})

value

$("input").val("aaa");给文本框添加value值
$("input").val();获取文本框的value值

4.属性设置

attr()
$("选择器").attr({
"属性1"：function(index,value){
	return 值；
	},
"属性2"：function(index,value){
	return 值；
	}	
})

5.css样式

<div></div>
    <div></div>
    <div></div>
    <div></div>

直接添加

$("div").css("backgroundColor","red"); //给所有div添加红色背景色

添加不一样的背景色时可进行判断

$("div").css("backgroundColor",function(index,value){
	return index===0 ? "red"  : "blue";
})
//给第一个div添加红色背景色，其他的为蓝色

添加多个样式

$("div").css({
	"	width":(index+1)*20+"px"
	},
	height:function (index){
	return (index+1)*20+"px"
	},
	backgroundColor:function(index){
	return "#"+(Math.floor(Math.random()*256*256*256)).toString(16) //添加随机颜色
	}
})

效果如下图

直接添加样式

当添加多个样式的时候可以使用空格分开
$("div").addClass("div0 div1"); 给div添加div0和div1的样式
可以移除任意一个样式
$("div").removeClass("div2");

点击切换样式

$("div").addClass("div0").on("click",function(e){
	$(this).toggleClass("div1") //这里点击时可以切换div1的样式，可来回切换 
	//$(this).toggleClass("div1"，true)//这里只切换一次
	//$(this).toggleClass("div1"，false)//这里不切换
})

6.DOM的宽高和位置

设置$("div").width(100);
点击增加宽度

$("div").on("click",function(e){
$(this).width($(this).width()+10)
});

仅获取的（可设置，不过我们一般不设置）

$("div').innerWidth();//获取div的width+padding
$("div').outerWidth();//获取div的width+padding+border;
$("div').outerWidth(true);//获取div的width+padding+border+margin;

仅获取，不可设置

$(".div1").position();//相对于父元素定位的位置
$(".div1").offset();//相对于页面的位置