jQuery-选择器

最新推荐文章于 2022-07-20 17:12:55 发布

潇授大帝

最新推荐文章于 2022-07-20 17:12:55 发布

阅读量73

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_39642150/article/details/98668916

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jQuery

选择器

按ID查找：var div = $('#abc').text();
按tag查找：var ps = $("p").length();
按class查找：var a = $('.red.green');	// 同时查找，注意没有空格！

按属性查找：
var title = $("a[title]");						//找有title属性的a标签
var email = $('[name=email]');
var icons = $('[name^=icon]'); 	// 找所有name属性值以icon开头
var names = $('[name$=with]');` // 找所有name属性值以with结尾
var names = $('[name*=with]');` // 找所有name属性值包含with
var icons = $('[class^="icon"]');`// 找所有class包含至少一个以icon开头
$("a[title!=num1]")								//找到title不等于num1的a标签

组合查找：
var emailInput = $('input[name=email]');	只希望查找<input>
var tr = $('tr.red');	根据tag和class来组合查找

多项选择器：
$('p,div');	 					// 把<p>和<div>都选出来
$('p.red,p.green');		//<p class="red">和<p class="green">
$("[aaa][bbb]")

子选择器

$("form input")		//找到表单中所有的 input 元素
$("form > input")	//匹配表单中所有的子级input元素。
$("label + input")		//匹配所有跟在 label 后面的 input 元素
$("form ~ input")		//找到所有与表单同辈的 input 元素

过滤器

$("li:first");
$("li:last");
$("li:not(.red)");		//除了class为red的，其余全部

$('ul li:first-child'); //在每个 ul 中查找第一个 li
$('ul li:last-child'); // 在每个 ul 中查找最后一个 li
$('ul li:only-child'); // 只获取仅有一个子元素的li
$('ul li:nth-child(even)'); // 选出第偶数个元素，索引从１开始
$('ul li:nth-child(odd)'); // 选出第奇数个元素，索引从１开始
$('ul li:nth-child(2)'); // 选出第2个元素，索引从１开始
$('ul li:nth-child(2n)'); // 选出第2的倍数的元素
$('ul li:nth-child(2n+1)'); // 选出第2的倍数+1的元素
$("ul li:nth-last-child(2)");	//在每个匹配的ul中查找倒数第2个li

$("tr:even")); // 选出序号为偶数的元素
$("tr:odd"); // 选出序号为奇数的元素
$("tr:eq(1)")	//查找第二行，索引从０开始
$("tr:eq(-1)")	//查找倒数第一行，索引从-1开始
$("tr:gt(2)")	//查找比索引2大的元素
$("tr:lt(2)")	//查找比索引２小的元素

$("input:not(:checked)")	//查找所有未选中的 input 元素
$("span:first-of-type");	//所有子元素为span,，且为span类型中的第一个
$("span:last-of-type");	//所有子元素为span,，且为span类型中的最后一个
$("ul li:nth-last-of-type(2)");		//在每个匹配的ul中查找倒数第二个li
$("ul li:only-child")	//在 ul 中查找是唯一子元素的 li

$("div:contains("xiao")");	//选择包含文本的元素
$("div.empty");						//选择 空文本 或 不包含子元素 的元素
$("ul:has(.red)");					//选择子元素包含.red 的 父元素
$("ul:parent");						//选择含有子元素的父元素
$(".red").is("li");					//查找li是否包含.red的元素，返回true/false

表单相关

$(":input")		//查找所有的input元素
$(":text")          //查找所有文本框
$(":password")		//查找所有密码框
$(":radio")		//查找所有单选按钮
$(":checkbox")	//查找所有复选框
$(":submit")		//查找所有提交按钮
$(":image")		//匹配所有图像域
$(":reset")		//查找所有重置按钮
$(":button")		//查找所有按钮
$(":file")		//查找所有文件域
$("tr:hidden")		//查找隐藏的 tr
$("input:hidden")	//匹配type为hidden的元素
$("tr:visible")			//查找所有可见的 tr 元素
$("div[id]")		//查找所有含有 id 属性的 div 元素
$("input:enabled")	//查找所有可用的input元素
$("input:disabled")		//查找所有不可用的input元素
$("input:checked")		//查找所有选中的复选框元素
$("select option:selected")		//查找所有选中的选项元素

$(":header").css("background", "#EEE");		给页面内所有标题加上背景色<h>
$(":root").css("background-color","yellow");		//设置<html>背景颜色为黄色<选择该文档的根元素>
$("tr:hidden")	//查找隐藏的 tr
$("input:hidden")	//匹配type为hidden的元素
$("tr:visible")		//查找所有可见的 tr 元素
$("input[name='newsletter']").attr("checked", true);		//查找所有 name 属性是 newsletter 的 input 元素
$("input[name!='newsletter']").attr("checked", true);	//查找所有 name 属性不是 newsletter 的 input 元素
$("input[name^='news']")	//查找所有 name 以 'news' 开始的 input 元素
$("input[name$='letter']")		//查找所有 name 以 'letter' 结尾的 input 元素
$("input[name*='man']")		//查找所有 name 包含 'man' 的 input 元素
$("input[id][name$='man']")		//找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

查找

var ul = $('ul.lang'); // 获得<ul>
var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
var swf = ul.find('#swift'); // 获得Swift
var hsk = ul.find('[name=haskell]'); // 获得Haskell

$("li").slice(5,7)	//获得第６，７的元素(不包头，含尾)
$("li").slice(2)	//获得3之后的全部元素
$("li").slice(2,-2)	//获得3之后的,倒数３之后的全部元素

＃("li").end();		//获取前一个(不是父)元素

向上查找

var swf = $('#swift'); // 获得Swift
var parent = swf.parent(); // 获得Swift的上层节点<ul>
var a = swf.parent('.red'); // 获得Swift的上层节点<ul>，同时传入过滤条件。如果ul不符合条件，返回空jQuery对象

同级查找

var swf = $('#swift'); // 获得Swift

swift.next(); // Scheme
swift.next('[name=haskell]'); // 空的jQuery对象，因为Swift的下一个元素Scheme不符合条件[name=haskell]

swift.prev(); // Python
swift.prev('.dy'); // Python，因为Python同时符合过滤器条件.dy

过滤

`ilter()方法可以过滤掉不符合选择器条件的节点：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme

`map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Swift', 'Scheme', 'Haskell']

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Haskell, 相当于$('ul.lang li:last-child')
var sub = langs.slice(2, 4); // Swift, Scheme, 参数和数组的slice()方法一致

修改Text和HTML

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
.innerHTML

潇授大帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-选择器

选择器按ID查找：var div = $('#abc').text();按tag查找：var ps = $("p").length();按class查找：var a = $('.red.green'); // 同时查找，注意没有空格！按属性查找：var email = $('[name=email]');var icons = $('[name^=icon]'); // 找所有name...
复制链接

扫一扫