jquery选择器的使用

最新推荐文章于 2023-04-10 08:49:28 发布

wespten

最新推荐文章于 2023-04-10 08:49:28 发布

阅读量1.6k

点赞数 1

分类专栏：全栈前端开发文章标签： jquery选择器的使用

本文链接：https://blog.csdn.net/qq_35029061/article/details/83898417

版权

全栈前端开发专栏收录该内容

61 篇文章 3 订阅

订阅专栏

一、jquery标签选择器的使用

获取id为example的div用$('#example')

$("#a1").css("background-color","red");  // 根据id

根据class类别

$(".c1").css("background-color","red");  // 根据class类别

根据标签元素

$("a").css("background-color","red");  

$("div").css("color","yellow");

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});


$('td[aria="View_CHECK_NAME"]').each(function(){
	if($(this).html()=="yes"){
		$(this).attr("style","color:red; text-align:center;cursor:pointer");
	}
})

根据属性

$("[href]").css("background-color","red");
$("[href='#']").css("background-color","red");
$("[href$='com']").css("background-color","red");

$("div[class=logo]").children("img").attr("src");

$("button[name='comQue']").each(function(index,item){
$(this).trigger("click");
)}

获取标签元素的属性

$("img").attr("src");    　　　　　　 //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg");    //设置所有图像的src属性
$("img").removeAttr("src");    　　　//将文档中图像的src属性删除

$(document).ready(function(){
	var headPicture = $("#headPicture");
	if(headPicture&&headPicture.length>0){
		var imgSrc = $($(headPicture)[0]).attr("src");
		$("div[class=logo]").children("img").attr("src",imgSrc);
	}
})

if($(this).html()=="yes"){
	$(this).attr("style","color:red; text-align:center;cursor:pointer");
}

<1>Attr用法一：设置单个值

$(selector).attr(attribute,value)

$("img").attr("width","180");

<2>Attr用法二：设置多个值

$(selector).attr({attribute:value, attribute:value ...})

$("img").attr({width:"50",height:"80"});

<3>Attr用法三：使用函数设置属性

$(selector).attr(attribute,function(index,oldvalue))

index:选择器的 index 值

oldvalue:当前属性值

$("img").attr("width",function(n,v){
      return v-50;
    });

<4>removeAttr

$(selector).removeAttr(attribute)

$("p").removeAttr("style");

获取标签样式

$("p").css("color");          //访问查看p元素的color属性
$("p").css("color","red");    //设置p元素的color属性为red
$("#a1").css("background-color","red"); 
$("div").css("height","30px");
$("p").css({ "color": "red", "background": "yellow" });    //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）

$("p").addClass("selected");    　　//为p元素加上 'selected' 类
$("p").removeClass("selected");    //从p元素中删除 'selected' 类
$("p").toggleClass("selected");    //如果存在就删除,否则就添加


$("p.c1").css("background-color","red");
$("ul li:first").css("background-color","red");
$("ul li:last").css("background-color","red");

根据标签位置与内容来获取

$('li:first')    //第一个元素
$('li:last')     //最后一个元素
$('li').first()    //第一个元素
$('li').last()     //最后一个元素

$("tr:even")     //索引为偶数的元素，从 0 开始
$("tr:odd")      //索引为奇数的元素，从 0 开始
 
$("tr:eq(1)")    //给定索引值的元素
$("p").eq(0)       //当前操作中第N个jQuery对象,类似索引
$("tr:gt(0)")    //大于给定索引值的元素
$("tr:lt(2)")    //小于给定索引值的元素

$(":focus")      //当前获取焦点的元素
$(":animated")   //正在执行动画效果的元素

$(":text").val("");        //这个能把input是text类型的全部重置了
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

$("#box_list1 tr:not(:first)").empty("");//根据id把不是第一个的全部置空
$("td:empty")    //不包含子元素或者文本的空元素

$("div:contains('nick')")    //包含nick文本的元素
$("div:has(p)")  //含有选择器所匹配的元素
$(this).hasClass("test")    //元素是否含有某个特定的类,返回布尔值
$('li').has('ul')  //包含特定后代的元素

$("input:checked")    //所有选中的元素
$("select option:selected")    //select中所有选中的option元素
$("input[type='checkbox']").prop("checked", true);    //选中复选框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src");    　　 //删除img的src属性

标签相互嵌套的规则获取

	$("p.c1").css("background-color","red");
	$("ul li:first").css("background-color","red");
	$("ul li:last").css("background-color","red");

    <div id="div2">
        div2内的文本
        <span>span内有文本内容</span>
    </div>
   console.log($("#div2 span").html());

$(".layui-input-block $(".layui-input-block button[id='subjectSmallImage']").off('click',a).on('click',upload);

可以同时绑定多个标签

$("ul li,div").on("click",function(){  
  alert("不响应事件!");  
 })

根据某一范围内来确定层次关系，比如在trs[index+1]范围内的td:eq(1)的标签。在后面范围内的查找前面的元素

$("input:first",$("td:eq(1)",$(trs[index+1]))).attr("checked",true);//第一个选中

根据层级来获取

$("ul>li>input:checked").each(function(i,el){
   $(this).prop("checked",true);
});

其他

$('p').offset()     //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()   //元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}

$(window).scrollTop()    //获取滚轮滑的高度
$(window).scrollLeft()   //获取滚轮滑的宽度
$(window).scrollTop('100')    //设置滚轮滑的高度为100

$("p").height();    //获取p元素的高度
$("p").width();     //获取p元素的宽度

$("p:first").innerHeight()    //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth()     //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)

$("p:first").outerHeight()    //匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth()     //匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true)    //为true时包括边距

jquery动态生成页签

           <div class="tb_tab">
             <div class="tb_col">
               <ul>
                  <li class="on">基本信息</li>
                  <li class="">商业</li>
                  <li class="">农业</li>
                  <li class="">工业</li>
                  <li class="">税收</li>
                  <li class="">财政</li>
                  <li class="">营收</li>
                </ul>
             </div>
             <div class="turn" style="display: block; opacity: 1;">
                <div class="tb_query">
                   <div class="tb_subq">
                      <label>日期</label>
                    <input type="text" id="rbrq" class="Wdate" onClick="WdatePicker()"/>
                   </div>
                   <div class="tb_subq">
                      <label>值班员</label>
                      <input type="text" id="ddry"/>
                   </div>
                </div>  
             </div>
 <div class="turn" style="display: none; opacity: 0; ">
                <div class="tb_table">
                  <table cellpadding="0" cellspacing="0" border="0" class="tbb_table">
                    <tr>
                      <td width="260">部门</td>
                      <td width="200">计划</td>
                      <td width="200">实际</td>
                      <td width="200">月计划量</td>
                      <td width="200">年计划量</td>
                      <td width="200">全部</td>
                    </tr>
                 </div>  
             </div>

<script type="text/javascript">
$(function(){
    // $('.tb_table table input').attr("disabled","false");
});
// tab切换
$(function(){
  function switchTab(liDe, divDe,elentDe,classDe,timeDe){
    liDe.each(function(i){
      var liDeThis = $(this);
      liDeThis.bind(elentDe,function(){
        liDe.removeClass();
        divDe.stop().hide().animate({'opacity':0},0);
        $(this).addClass(classDe);
        divDe.eq(i).show().animate({'opacity':1},timeDe);
      });
    });
  }
  switchTab($(".tb_tab").find(".tb_col li"), $(".tb_tab").find(".turn"),"click","on",300);
});
</script>

获取选中的页签

	var u =$(".tb_tab .tb_col ul").children();  //通过选择器获取页签
	for(var i =0;i<u.length;i++){
		var selection = $(u[i]).attr("class"); //获取0-6 i的页签 属性选择器
		if(selection == "on"){
			if(i == 0){
			
				});
				}else if(i == 1){
					
				}else if(i == 2){
					
				}else if(i == 3 ){
					
				}else if(i == 4){
					
				}else if(i == 5){
					
				}else{
					
				}

在用户点击文章标题时，将文章动态载入到div.contentd中：

<div class="post"> 
<h2><a href="http://jb51.net">My Page</a></h2> 
<div class="content"> 
    Teaser text... 
  </div> 
</div> 
<div class="post"> 
<h2><a href="http://jb51.net">My Other Page</a></h2> 
<div class="content"> 
    Teaser text... 
  </div> 
</div>

jQuery(document).ready(function ($) { 
  $("div.post h2 a").click(function () { 
    var a    = $(this), 
    href = a.attr('href'), // Let jQuery normalize `href`, 
    content  = a.parent().next(); 
    content.load(href + " #content"); 
    return false; // "cancel" the default behavior of following the link 
  }); 
});

jquery选择器汇总

jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") 

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点 

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个 

jQuery对象返回，children()则只会返回节点 

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点 

jQuery.prevAll()，返回所有之前的兄弟节点 

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点 

jQuery.nextAll()，返回所有之后的兄弟节点 

jQuery.siblings(),返回兄弟姐妹节点，不分前后 

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从元素开始找,等同于$("p span")

$("td:parent")   //含有子元素或者文本的元素
$("p").parent()          //每个p元素的父元素
$("p").parents()         //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")    //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾
$("div").children()      //div中的每个子元素,第一层
$("div").siblings()      //所有的同辈元素,不包括自己
$("p").next()       　　　//紧邻p元素后的一个同辈元素
$("p").nextAll()         //p元素之后所有的同辈元素
$("#test").nextUntil("#test2")    //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").prev()            //紧邻p元素前的一个同辈元素
$("p").prevAll()         //p元素之前所有的同辈元素
$("#test").prevUntil("#test2")    //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾

find方法一般是用于获取子元素，比如获取div下的p的内容

<div id="example">
<p>example</p>
</div>
$('#example').find('p').text()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

$("div").find("span")    //div中的包含的所有span元素,子子孙孙
var tbodyLength = $(this).siblings().find("tbody[id='subjectSmallImage_list_table']").find("tr")

下面的例子返回属于 <div> 后代的所有 <span> 元素：

<script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

返回 <div> 的所有后代：

<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

parent的用法

<div id='div1'>
<div id='div2'><p></p></div>
<div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>


$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。


<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script> 
</head> 
<body> 
<table>
<tr>
      <td><input id="btn1"  class="btn" type="button"  value="test" /></td>
      <td>some text</td>
</tr>
</table>



其中：
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parent().next()获取的是td相临的td
例子中：
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") 

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点 

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个 

jQuery对象返回，children()则只会返回节点

parent() 方法返回被选元素的直接父元素。

<script>
$(document).ready(function(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

<script>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

<script>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors"> body (曾曾祖父元素)
  <div style="width:500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

contents()的用法

window.parent.$("#iframe").contents().hide();

next()的用法、

next() 方法返回被选元素的下一个同胞元素。

$("#RecList").next().find("[type='checkbox']").each(function(index,item){
                var cancelTd =  $("#RecList").next().find("tr").eq(index).find("td");
                cancelId += (cancelTd.eq(1).text()+",");
                                Name+= (cancelTd.eq(2).text()+",");
        });

<script>
$(document).ready(function(){
	$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

var l=$("ul li:eq(1)").next();
		alert(l.html())
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>

nextAll() 方法返回被选元素的所有跟随的同胞元素。

<script>
$(document).ready(function(){
	$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

<script>
$(document).ready(function(){
	$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>

children()的用法

$(".jy").find("tr").each(function () {
        var list = $(this).children('td:eq(1) input');
        for(var i = 0;i<list.length;i++){
            if(list[i].checked){
                var listxz = $(list[i]).val();
                if(listxz==null){
                    alert("有未选项,请确认");
                    return false;
                }
            }
        }

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

<script>
$(document).ready(function(){
	$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

<script>
$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

var b=$("body").children();
		alert(b.length);
		var u=$("ul").children();
		alert(u.length);
		for(var i=0;i<u.length;i++){
			// alert(u[i].innerHTML);
			alert($(u[i]).html());
		}
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>

siblings()的用法

siblings() 方法返回被选元素的所有同胞元素。

var tbodyLength = $(this).siblings().find("tbody[id='images_list_table']").find("tr")

点击其中一个后添加on样式

<a href="javascript:void(0);" onclick="open('a');return false;" class="off">a</a>
<a href="javascript:void(0);" onclick="open('b');return false;" class="off">b</a>
<a href="javascript:void(0);" onclick="open('c');return false;" class="off">c</a>

$("a").parent().on("click", "a", function() {
    $(this).addClass("on").siblings("a").removeClass("on");
});

prev()的用法

prev() 获取上一个dom节点

var l=$("ul li:eq(1)").prev();
alert(l.html());

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。。

var l=$("ul li:eq(1)").prev();
		alert(l.html());
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>

first() 方法返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

<script>
$(document).ready(function(){
  $("div p").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<div>
	<p>这是 div 中的一个段落。</p>
</div>

<div>
	<p>这是另外一个 div 中的一个段落。</p>
</div>

<p>这是一个段落。</p>

</body>
</html>

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

<script>
$(document).ready(function(){
	$("div p").last().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<div>
	<p>这是 div 中的一个段落。</p>
</div>

<div>
	<p>这是另外一个 div 中的一个段落。</p>
</div>

<p>这是一个段落。</p>

</body>
</html>

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

<script>
$(document).ready(function(){
  $("p").eq(1).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>菜鸟教程 (index 0).</p>
<p>http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>

</body>
</html>

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "url" 的所有 <p> 元素：

<script>
$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>菜鸟教程 (index 0).</p>
<p class="url">http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>

</body>
</html>

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "url" 的所有 <p> 元素：

<script>
$(document).ready(function(){
   $("p").not(".url").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>菜鸟教程 (index 0).</p>
<p class="url">http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>

</body>
</html>

其他

wespten

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery选择器的使用

一、jquery标签选择器的使用获取id为example的div用$('#example')$("#a1").css("background-color","red"); // 根据id根据class类别$(".c1").css("background-color","red"); // 根据class类别根据标签元素$("a").cs
复制链接

扫一扫