jQuery的选择器

jQuery是JavaScript的一个库,它是一个轻量型的语言。选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。它有很多的选择器来让我们获取jQuery中的元素节点,下面我们就来具体的说下:

$(“*”)全局选择器,它是用于获取所有的元素;

$(“#id”)是ID选择器,获取元素节点中有ID的元素;可以通过id选择器给所选取的元素,让它改变样式。

$(“.class”)是类选择器,获取元素节点中有类名的元素;

$(“p”)是标签选择器,通过标签获取元素;

$(“.input.demo”)是获取所有class=”input”且class=”demo”的元素;

$(“p:first”)它是获取第一个p元素的;我们可以用它来改变第一个段落的字体大小和颜色等一些样式与效果。下面我们通过一段案例来具体的说明下它的作用

<body>

<p>HTML5</p>

<p>JavaScript</p>

<p>jQuery</p>

</body>

$(function(){

$(“p:first”).css.backgroundColor=”red”;

});

通过上面这段代码我们可以让body中的第一个p标签里面的文本变成红色。

$(“p:last”)它是获取最后一个p元素的;下面我们通过一段案例来具体的说明下它的作用:

<body>

<p>HTML5</p>

<p>JavaScript</p>

<p>jQuery</p>

</body>

$(function(){

$(“p:last”).css.backgroundColor=”yellow”;

});

通过上面这段代码我们可以让body中的最后一个p标签里面的文本变成黄色。

$(“tr:even”)它是获取所有偶数的tr元素的;

$(“tr:odd”)它是获取所有奇数的tr元素的;

$(“ul li:eq(3)”)它是获取ul中第四个里li元素的,它是用index来选择的,index的下标是从0开始的。

$(“ul li:gt(3)”)它是获取ul中的li的index大于3的元素的;

$(“ul li:lt(3)”)它是获取ul中的li的index小于3的元素的;

$(“input:not(:empty)”)是获取所有不为空的input元素的;

$(“:header”)是获取所有的标题元素的,h1-h6;

:animated是获取所有的动画元素的;

$(“:contains(‘W3School’)”)是获取包含指定字符串的所有元素的;

$(“:empty”)是获取无子(元素)节点的所有元素;

$(“p:hidden”)它的作用是隐藏所有的p元素;

$(“table:visible”)是获取所有可见的表格;

$(“[href]”)是获取所有带有href属性的元素的;

$(“[href=’#’]”)是获取所有href属性的值等于#的;

$(“[href!=’#’]”)是获取所有href属性的值不等于#的;

$(“[href$=’.jpg’]”)是获取所有href属性的值包含以.jpg结尾的元素。

$(“:input”)是获取所有的input元素的;

$(“:text”)是获取所有type等于text的input元素的;

$(“:password”)是获取所有type等于password的input元素的;

$(“:radio”)是获取所有type等于radio的input元素的;

$(“:checkbox”)是获取所有type等于checkbox的input元素的;

$(“:submit”)是获取所有的type等于submit的input元素的;

$(“:reset”)是获取所有的type等于reset的input元素的;

$(“:button”)是获取所有的type等于button的input元素;

$(“:image”)是获取所有的type等于image的input元素的;

$(“:file”)是获取所有的type等于file的input元素的;

$(“:enabled”)是获取所有激活的input元素的;

$(“:disbled”)是获取所有禁用的input元素的;

$(“:selected”)是获取所有被选取的input元素的;

$(“:checked”)是获取所有被选中的input元素的。

我们在使用这些选择器的时候一定要懂得它的作用,这样它才能发挥的最大的利用价值,只有更好的运用这些选择器,我们才能提高我们的代码编写速度,才能更好的显示我们网页的制作水平和效果。感谢大家,这就是今天我所分享的jQuery选择器。

时间: 2024-12-19 00:57:56

jQuery的选择器的相关文章

谜一样的jquery之$选择器

jquery是一个强大的js类库,提供了很多便利的操作方法并兼容不同的浏览器,一旦使用便欲罢不能,根本停不下来,今天我们就来解读一下这个神秘的jquery源代码. 前几天思考再三,自己尝试着封装了一下jquery的$选择器,然而并不完善,我只对id,class,和标签选择器进行了封装,发现其实如果实现浅层的封装那么我们很容易就能够实现,但是一旦我们尝试着选择器的层次嵌套就会出来很多大大小小的坑! 下面我们先来看一下我个人封装的jquery的选择器部分. window.$ = function (

jquery颜色选择器

本站下载 第二种:纯JAVASCRIPT: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2311"> <title>DW调色板</title> <script> var ColorHex=new Array('00','33','66','99','CC','FF') var SpColo

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法

1 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 2 3 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 4 $("div") 选择所有的div标签元素,返回div元素数组 5 $(".myClass") 选择使用myClass类的css的所有元素 6 $("*") 选择文档中的所有的元素,可

关于jquery ID选择器的看法

最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $("div#bar") 下面说说我为什么会给出两种答案 1. 因为页面要求ID是唯一的,题目中的语句,可以直接优化成ID选择 2. 因为jQuery的选择器引擎用的是Sizzle,而$("div#bar")这样的写法,在Sizzle内部,会是一个从右往左的查找顺序,也就是

jQuery 复合选择器应用的几个例子

这篇文章主要介绍了jQuery 复合选择器应用的几个例子,本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js,喜欢的朋友可以学习下 <!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 ? 1 2 3 4 5 <input type="checkbox" id="ckb_1" />  <input type="chec

jQuery 过滤选择器

jQuery 选择器(一) 1.ID选择器根据控件ID获取jQeruy,相当于javascript的getelementById.使用方法:$("#myid"),获取ID等于myid的jquery对象. 2.标签选择器使用标签名称获取jQuery,相当于javascript的getElementsByTagName_r().使用方法:$("p"),获取所有p标签.3.class选择器class为元素的定义样式,根据class名称获取jquery对象.如:$(&quo

关于JQuery的选择器

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")           选择所有的div标签元素,返回div元素数组 $(".myClass")      选择使用myClass类的css的所有元素 $("*")        

jquery input 选择器

1.9.1 官方文档: 创建一个 <input> 元素必须同时设定 type 属性.因为微软规定 <input> 元素的 type 只能写一次. jQuery 代码: // 在 IE 中无效: $("<input>").attr("type", "checkbox"); // 在 IE 中有效: $("<input type='checkbox'>");   jquery inp

jQuery的选择器中的通配符[id^=&#39;code&#39;]

1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 (2)根据索引选择 $("tbody tr:even"); //选择索引为偶数的所有tr标签 $("tbody

Jquery常用选择器

Jquery常用选择器<p id="test">这是段落中的<b>粗体</b>文本.</p>text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)$("#test").text():这是段落中的粗体文本.$("#test").html():这是段落中的<b>粗体</b>文本. append() - 在被选元素的结尾插入