jQuery 元素选择器

最新推荐文章于 2024-09-05 15:53:15 发布

qq_31459039

最新推荐文章于 2024-09-05 15:53:15 发布

阅读量1.6k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_31459039/article/details/90524354

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	class="intro" 的所有元素
.class,.class	$(".intro,.demo")	class 为 "intro" 或 "demo" 的所有元素
element	$("p")	所有 <p> 元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='default.htm']")	所有带有 href 属性且值等于 "default.htm" 的元素

:text	$(":text")	所有带有 type="text" 的 input 元素
:password	$(":password")	所有带有 type="password" 的 input 元素
:radio	$(":radio")	所有带有 type="radio" 的 input 元素
:checkbox	$(":checkbox")	所有带有 type="checkbox" 的 input 元素
:submit	$(":submit")	所有带有 type="submit" 的 input 元素
:reset	$(":reset")	所有带有 type="reset" 的 input 元素
:button	$(":button")	所有带有 type="button" 的 input 元素
:image	$(":image")	所有带有 type="image" 的 input 元素
:file	$(":file")	所有带有 type="file" 的 input 元素

1.基本选择器

$("#id")            //ID选择器
$("div")            //元素选择器
$(".classname")     //类选择器
$(".classname,.classname1,#id1")     //组合选择器

2.过滤选择器(重点)

$("li:first")    //第一个li
$("li:last")     //最后一个li
$("li:even")     //挑选下标为偶数的li
$("li:odd")      //挑选下标为奇数的li
$("li:eq(4)")    //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)")    //下标大于 2 的li
$("li:lt(2)")    //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

3.属性过滤选择器

$("div[id]")                所有含有 id 属性的 div 元素
$("div[id='123']")         id属性值为123的div 元素
$("div[id!='123']")        id属性值不等于123的div 元素
$("input[name!='news']")   所有 name 属性不是 news的 input 元素
$("input[name^='news']")   name 以 'news' 开始的 input 元素
$("input[name$='letter']") 所有name以'letter'结尾的input元素
$('#phpernote li').not(':even')    id=phpernote下面所有奇数行的li元素
$('img').not('.runoob')/ $('img:not(.phpernote)') 所有的img元素，排除class=phpernote的
$("#editForm").find("input[type='hidden']").not('[name=recomBitType]') id=editForm表单下 type等于hidden且排除名字为recomBitType的input元素

4.表单选择器

$(":input")      匹配所有 input, textarea, select 和 button 元素
$(":text")       所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password")   所有密码框
$(":radio")      所有单选按钮
$(":checkbox")   所有复选框

5.层次过滤器

$("p.intro")            选取 class 为 intro 的 <p> 元素
$("#one").prev("div")   获取id为one的元素的前面紧邻的同辈<div>元素
$("p #intro")           选取 id为 intro 的 <p> 元素
$("ul li")              选取<ul> 元素的所有 <li> 元素

5.内容过滤选择器

$("div:contains('Runob')")    // 包含 Runob文本的元素
$("td:empty")                 //不包含子元素或者文本的空元素
$("div:has(selector)")        //含有选择器所匹配的元素
$("td:parent")                //含有子元素或者文本的元素
$("#adTytile").parent()      //找到 id=adTytile 所在的父级元素

$("#searchForm,#editForm").find("input[name='recomBitType']").val(1);
$("#editForm").find("[name=id]").val(1);
$("iframe[class='ke-edit-iframe']").contents().find("body").html();

$(this)

选取当前 HTML 元素

  <button>点我</button>
  $("button").click(function(){
        $(this).hide(); //$(this)是把当前对象转化成jquery对象
  });

$("input[name^='recommendType']").click(function () {
    var res = $(this).val();
    var index= $(this).attr("name").split("recommendType")[1];
});

$("#soft").find(".btns").eq(ulIndex).removeClass('disbtns').attr({"href":"javacript:;","onclick":"receiveGift(this)"});
$("#soft").find(".btns").eq(ulIndex).addClass('disbtns').removeAttr('onclick');
<li id="li_1" data-softid="data-softid" data-package="my_package" οnclick="saveUser(this)" ></li> 自定义属性

function saveUser(obj){
console.log($(obj).html());
console.log($(obj).attr("data-softid"));//获取对象属性

}



<div class="prize_list_wrap">
	<ul class="prize_list">
		<#list _ret.record_list as record>
			<li>
				<div class="list_img">
					<#--获奖类型   1:礼券  2:现金红包-->
					<#if record.awardType==1>
						<img src="/static/images/play/gift.png"/>
					<#else>
						<img src="/static/images/play/redpack.png"/>
					</#if>
				</div>
				<div class="list_txt">
					<h3>${record.prizeName}</h3>
						<p>激活码: <span>${record.prizeCode}</span></p>
					<p>有效期至: ${_ret.endtime?string("yyyy-MM-dd HH:mm:ss")}</p>
				</div>
				<a class="list_btn" href="#">复制</a>
			</li>
		</#list>
	</ul>
	<div class="title2" style="margin-top:1rem">
		<a href="#" id="userof_prize_btn" class="btns">使用方法</a>
	</div>
</div>

 //复制当前激活码
$(".list_btn").click(function () {
	var codeTxt = $(this).prev(".list_txt").find("p").eq(0).find("span").text();
	
});

参考链接: https://www.runoob.com/jquery/jquery-ref-selectors.html