jQuery和CSS中最快的选择器方法-ID是否？（jquery css选择器）

25-02-24 11

如果您对jQuery和CSS中最快的选择器方法-ID是否？和jquerycss选择器感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解jQuery和CSS中最快的选择器方法-ID是否？的各种细节，

如果您对jQuery和CSS中最快的选择器方法-ID是否？和jquery css选择器感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解jQuery和CSS中最快的选择器方法-ID是否？的各种细节，并对jquery css选择器进行深入的分析，此外还有关于6款新颖的jQuery和CSS3进度条插件推荐_jquery、CSS和jQuery中的选择器：只是类/ id,还是标签？、css选择器和jQuery选择器、day02 jQuery jQuery与js的转换链式编程 jQuery: CSS 选择器筛选属性效果核心的实用技巧。

本文目录一览：

jQuery和CSS中最快的选择器方法-ID是否？（jquery css选择器）
6款新颖的jQuery和CSS3进度条插件推荐_jquery
CSS和jQuery中的选择器：只是类/ id,还是标签？
css选择器和jQuery选择器
day02 jQuery jQuery与js的转换链式编程 jQuery: CSS 选择器筛选属性效果核心

jQuery和CSS中最快的选择器方法-ID是否？（jquery css选择器）

jquery / javascript中最快的是什么？

$(''#myID .myClass'')

要么

$(''.myClass'')

最好在CSS中使用什么？

#myID .myClass{}

要么

.myClass{}

我现在看到我应该更好地解释。抱歉!

在CSS和JavaScript中，Ofceauce ID都是更快的选择器。但是有时您需要使用类，因为有多个选择器。

比如说我有我很大的html文档。在页面中间，我有：

<div id="myID"><a>link1</a><a>link1</a><a>link1</a></div>

如果我要定位所有“ myClass”。那么在定位类之前定位ID会更好吗？（这样，我就不必对整个HTML文档进行domtravel了）例如：

这会：

$（’＃myID’）。find（’。myClass’）

快于：

$（’。myClass’）

答案1

小编典典

我在现代浏览器上进行的测试建议您选择两者之一， __

$(''#id'').find(''.class'') // or$(''.class'')

但没有，

$(''#id .class'')

原因是所有现代浏览器都实现了getElementsByClassName按类名进行几乎恒定的时间查找（假设是哈希实现）。哪些浏览器是现代的，这是另一个主观问题。

6款新颖的jQuery和CSS3进度条插件推荐_jquery

现在的网页功能越来越多，尤其是AJAX的广泛应用，进度条和Loading加载动画显得越来越重要了。下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件，希望对大家有帮助。

1、不同进度显示不同颜色的进度条

这款CSS3进度条和别的有所不同，他的主要特点是随着进度的变化，进度条的颜色会有所改变，这个和游戏中人物的生命值很相似。

2、纯CSS3实现的彩色进度条

该进度条利用了CSS3的颜色渐变属性，让进度条的色彩显得非常具有立体感。

3、jQuery Progress Bar

4、jQuery自定义Loading动画插件Spin.js

Spin.js可以自定义动画加载图案的长度、宽度、粗细、速度等参数，非常灵活。利用Spin.js可以快速地为你定制一款漂亮的加载动画图片。

5、3款基于CSS3的动画加载效果

这3款CSS Loading动画非常有创意，而且具有立体感。

6、简单的CSS3进度条

这款CSS3进度条十分简单，但外观却很漂亮，值得收藏和使用。

CSS和jQuery中的选择器：只是类/ id,还是标签？

使用CSS和jQuery中的类/ id选择器,我经常看到两种不同的方法：

1.只是课程或身份证明：

CSS：

.foo{}

#bar{}

jQuery的：

$(".foo")

$("#bar")

2.带有标签的类或标识：

CSS：

div.foo{}

div#bar{}

jQuery的：

$("div.foo")

$("div#bar")

我的问题是：除了使用标签进一步细化选择器之外,使用class / id放置标签有什么问题吗？哪种语法正确？

我听过一些人说,除非特殊性需要标签,否则放置它是错误的.虽然其他人说它没有任何区别,实际上更喜欢它,因为它提供了有关选择器的进一步信息.

你怎么看？

解决方法

随附标签

$(“div.foo”)或div.foo {}

你正在给浏览器一个手,告诉它不要搜索具有某个类或ID的每个元素.相反,在上面的例子中,它只会搜索div.

虽然在单个元素或小页面上的性能可以忽略不计,但如果您正在讨论包含数千个标记和几个不同的css或jQuery调用的文档,则可能会增加.

区分两个要素

在某些情况下,您可能也需要它来区分具有相同类的两个元素.

特殊性

另外,我认为你应该尽可能包含元素,以尽可能使你的CSS(和jQuery)具体化……将惊喜降到最低！

更适合共享代码/故障排除/更新

当元素包含在规则中时,查找/更改/编辑规则也更容易.

编辑

要回应@ stefmikhail关于@ YoTsumi基准测试的评论,不同之处在于：

搜索唯一ID始终是最快的事情,因为页面上应该只有一个ID,并且引擎需要单独查找它.但是,正如@BoltClock所提到的,这个问题不仅仅是性能问题.

css选择器和jQuery选择器

选择器

在书写样式和查找节点的时候，选择器是必不可少的，所以了解选择器的书写方式和使用就显得极为重要，本文主要分开讲了css选择器和jQuery选择器；

css选择器

大家都可能知道，在浏览器渲染的时候会构建dom、cssom然后render，这里盗图两张：
图片描述

看看就好了，本文还是讲css和dom的关联过程，书写css的格式均是：

body .test{       //选择器
    color:red;    //样式名和值
}

看到就很熟悉，这里需要提醒大家，虽然书写是从左至右，但是css的遍历方式且是从右到左的方式，原因是从右至左的遍历方式存在效率问题，因为一般写在左边的是父级元素、后边跟着子元素，如果从左到右的查找，就会遍历父级元素下的所有子元素，相反，如果从右至左的话，只需要找到子元素然后一级级的往上查找即可；
对于css的书写规范可以参考：https://github.com/doyoe/html... 里面写的还是很全的，现在开始讲解选择器问题，

基本类型选择器

元素选择器
类选择器
id选择器
通配符选择器 * 【应该尽量少用】
属性选择器

这其中属性选择器的方式较为多样，具体如下【大部分规则和正则有点类似】：
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的，且值为"value"的属性的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为"value"。
[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。
[attr^=value]
表示带有以 attr 命名的，且值是以"value"开头的属性的元素。
[attr$=value]
表示带有以 attr 命名的，且值是以"value"结尾的属性的元素。
[attr*=value]
表示带有以 attr 命名的，且值包含有"value"的属性的元素。
[attr operator value i]
在带有属性值的属性选型选择器表达式的右括号（]括号）前添加用空格间隔开的字母i（或I）可以忽略属性值的大小写（ASCII字符范围内的字母），后面加个i、I来标识不区分大小写，

结合选择器

相邻兄弟选择器 div + p 【表示p元素为选择项，但是他的前方紧邻的兄弟必须是div】
通用相邻元素 div ~ p 【表示p元素为选择项，但是他的前方必须有div兄弟元素，可以不紧邻】
子选择器 div > p 【表示p元素的直接父级元素必须是div才会匹配】
后代选择器 div p 【空格即可，所少个空格无关】
自身选择器 div.test 【有class为test的div元素】

伪类选择器

伪类选择器可以看成是和类选择器类似的形式，只不过类class是使用.来表示，而伪类使用:来表示

:active  [当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互]
:any  [.a > :-moz-any(.b, .c) === .a .b,.a .c 这样的书写方便相同样式的元素的组合，试验阶段，少用为好]
:any-link [所有的超链接]
:checked  [一些选择表单元素被选择了，可以用于实现点击某些CheckBox来线上更多的模块]
:default []
:dir()  [文字书写方向 :dir(rtl) 文字从右到左  和属性选择器不同，
    [dir=rtl] 或 [dir=ltr]不会匹配到dir属性的值为auto的元素。
    而 :dir()会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的]
:disabled [被禁用的元素]
:empty  [没有子元素的元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。]
:enabled [和disabled相反]
:first [@page :first 和打印配合，改变打印时的一些属性]
:first-child [element:first-child 第一个子元素]
:first-of-type [伪类匹配子元素中新的种类的元素（第一次出现元素类型就是新的）]
:fullscreen [实验性，全屏的时候匹配的某些元素的样式]
:focus [在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点]
:focus-within []
:hover [适用于用户使用指示设备虚指一个元素（没有激活它）的情况，大部分是指鼠标悬停]
:indeterminate [一下三种情况，
    indeterminate 属性被 JavaScript 置为 true 的 <input type="checkbox"> 元素 
    所有 radio 按钮都未被选中的 <input type="radio"> 元素
    处于 indeterminate 状态的 <progress> 元素]
:in-range [input框的输入内容在max min等限制的范围内时候会匹配上]
:invalid [表示任何 <input> 或 <form> 元素的内容无法通过输入的类型设置的验证]
:lang  [element:lang(language-code) { style properties }主要是元素使用的语言]
:last-child [最后一个孩子元素]
:last-of-type [最后出现的类型]
:left [@page :left 配合打印来设置]
:link [链接]
:not() [:not(selector) 在选择器上增加一层过滤的功能]
:nth-child []
    :nth-child( <nth> [ of <selector># ]? )
    where 
    <nth> = <an-plus-b> | even | odd
    允许对子元素做一些算法操作，用以匹配某些想要匹配的节点
:nth-last-child [和上面的一样，只是顺序是从后往前数]
:nth-last-of-type [和上面一样，只是不是统计子元素，而是子元素的类型为一种匹配，来匹配span的odd或者div类型的odd]
:nth-of-type []
:only-child []
:only-of-type []
:optional [表示任意没有required属性的 <input> 或 <textarea> 元素使用它. 它允许表单容易的展示可选字段并且渲染其外观.]
:out-of-range [表单元素在规定的范围外]
:placeholder-shown [:placeholder-shown 有placeholder文本的输入框]
:read-only [只读元素]
:read-write [可编辑元素]
:required []
:right []
:root []
:scope []
:target []
:valid [合符规范的]
:visited [被访问过的链接]

注意链接的匹配：需要遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。

伪元素选择器

伪元素可以看做元素一样处理，大部分都还没标准化，用的较多的也就是::before ::after

::-moz-progress-bar []
::-moz-range-progress []
::-moz-range-thumb []
::-moz-range-track []
::-ms-fill []
::-ms-fill-lower []
::-ms-fill-upper []
::-ms-thumb []
::-ms-track []
::-webkit-progress-bar []
::-webkit-progress-value []
::-webkit-slider-runnable-track []
::-webkit-slider-thumb []
::after (:after)
::backdrop []
::before (:before)
::first-letter (:first-letter)
::first-line (:first-line) []
::selection

需要注意的是：由于选择器的权重问题，所以当多个选择器命中同一个元素时，需要根据权重确定元素的具体样式【由情到重，不能越级进位】：

类型选择器（type selectors）（例如, h1）和伪元素（pseudo-elements）（例如, ::before）
类选择器（class selectors） (例如,.example)，属性选择器（attributes selectors）（例如, [type="radio"]），伪类（pseudo-classes）（例如, :hover）
ID选择器（例如, #example）
给元素添加的内联样式 (例如,) 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。.
!important 规则例外
当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。虽然技术上很重要与特异性无关，但它与它直接相关。

通用选择器（universal selector）(*), 组合子（combinators） (+, >, ~, '' '') 和否定伪类（negation pseudo-class）(:not()) 对特异性没有影响。（但是，在 :not() 内部声明的选择器是会影响优先级，:not 否定伪类在优先级计算中不会被看作是伪类. 事实上, 在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数.）。

jQuery选择器

大部分还是和css选择器保持了一致，但是有以下一些部分的改动：

:first    $("p:first")    第一个 <p> 元素
:last    $("p:last")    最后一个 <p> 元素
:even    $("tr:even")    所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd    $("tr:odd")    所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:eq(index)    $("ul li:eq(3)")    列表中的第四个元素（index 值从 0 开始）
:gt(no)    $("ul li:gt(3)")    列举 index 大于 3 的元素
:lt(no) $("ul li:lt(3)")    列举 index 小于 3 的元素
:header    $(":header")    所有标题元素 <h1>, <h2> ...
:animated    $(":animated")    所有动画元素
:contains(text)    $(":contains(''Hello'')")    所有包含文本 "Hello" 的元素
:has(selector)    $("div:has(p)")    所有包含有 <p> 元素在其内的 <div> 元素
:hidden    $("p:hidden")    所有隐藏的 <p> 元素
:visible    $("table:visible")    所有可见的表格
[attribute$=value]    $("[href$=''.jpg'']")    所有带有 href 属性且值以 ".jpg" 结尾的元素
:input    $(":input")    所有 input 元素
: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 元素

大部分还是在原有的上面做了一些添加。

day02 jQuery jQuery与js的转换链式编程 jQuery: CSS 选择器筛选属性效果核心

day02 jQuery jQuery与js的转换链式编程 jQuery: CSS 选择器筛选属性效果核心一.jQuery对象和js对象的相互转换 1.jQuery转成js: 去掉$() 方式一: $('li')[0] //直接加下标方式二: $('li').get(0) //使用jQuery对象的get()方法 2.js转成jQuery: 加$() var item = document.getElementsByTagName('li')[0]; //先取到js对象 $(item) //直接: $(js对象) <body> <ul> <li>bajie</li> <li>wukong</li> <li>datang</li> </ul> <script src="jquery.js"></script> <script> var colors = ['red','yellow','blue']; console.log($('li')[0]); //jQuery转js var item = document.getElementsByTagName('li')[0]; console.log(item); console.log($(item)); //js转jQuery </script> </body> 二.jQuery的链式编程 jQuery对象的方法执行完,又返回了jQuery对象, 还可以接着使用其他方法, 这就是链式编程 $(item).css('color','blue').click(function () { alert(666) }); 三.常用的案例把列表中的每一项数据分别赋值给对应的js对象 <body> <ul> <li>bajie</li> <li>wukong</li> <li>datang</li> </ul> <script src="jquery.js"></script> <script> var colors = ['red','yellow','blue']; for(var i=0; i<colors.length; i++){ $('li')[i].style.backgroundColor = colors[i]; //使用 .style. 而不是.css(), 因为这里的是js对象 } </script> </body> 四.jQuery的操作 1.jQuery: CSS 1.1.CSS: 对样式的操作 $('div').css('color') //一个参数,获取值 $('div').css({'color':'blue','backgroudColor':'yellow'}) //一个参数,并且是字典,设置多个值 $('div').css('color','blue') //两个参数,设置值 2.jQuery: 选择器: 2.1.基本选择器 $("#my\\[Div\\]") //id选择器,特殊字符用两个反斜杠\\转义 $("div") //标签选择器 $(".myClass") //类名选择器 $("*") //通配选择器 $("div,span,p.myClass") //组合选择器,多个选择器用逗号,分隔 2.2.层级选择器 $("form input") //后代选择器,用空格分隔 $("form > input") //子代选择器,用大于号 > 分隔 <body> <div id="Box"> <p>bajie</p> </div> <p>wukong</p> <script src="jquery.js"></script> <script> $(function () { $('#Box p').css('color','red'); }) </script> </body> $("label + input") //紧邻选择器, prev + next, 所有紧邻label的后面第一个input,使用加号 + 分隔 $("form ~ input") //兄弟选择器, prev ~ siblings, form之后的所有同辈的input元素,用匹配符号 ~ 分隔 <body> <div id="Box"> <p>bajie</p> <p>datang</p> <p>xiha</p> </div> <p>wukong</p> <p>wukong</p> <script src="jquery.js"></script> <script> $(function () { $('#Box+p').css('color','green'); }) </script> </body> 2.3.基本筛选器选择器这个选择器是css没有的,是基本选择器的增强: 在原有的选择器后面加冒号 :xxx,用于二次筛选 $("tr:eq(1)") //按索引: 获取等于给定索引的标签 $("tr:gt(0)") //按索引: 获取大于给定索引的标签 $("tr:lt(2)") //按索引: 获取小于给定索引的标签 $("tr:odd") //按索引: 获取奇数索引的标签 $("tr:even") //按索引: 获取偶数索引的标签 $('li:first') //获取第一个 $('li:last') //获取最后一个 <body> <ul> <li>bajie</li> <li>wukong</li> <li>dalang</li> <li>xiha</li> <li>strong</li> </ul> <script src="jquery.js"></script> <script> $(function () { $('li:eq(0)').css('color','red'); }) </script> </body> 2.4.属性选择器是基本选择器的增强: 在原有的选择器后面加中括号[ ],用于二次筛选 $("div[id]") //匹配含有指定属性: 的标签 $("input[name='newsletter']") //匹配给定属性的值: 等于某个特定值的标签 $("input[name!='newsletter']") //匹配给定属性的值: 不等于某个特定值的标签 $("input[name^='news']") //匹配给定属性的值: 以某些值开始的标签 $("input[name$='letter']") //匹配给定属性的值: 以某些值结尾的标签 $("input[name*='man']") //匹配给定属性的值: 含有某些值的标签 $("input[id][name$='man']") //复合属性选择器 <head> <Meta charset="UTF-8"> <title>Document</title> <style> input{ border:none; outline:none; width: 300px; height: 50px; border: 1px solid red; } </style> </head> <body> <form action="#"> <input type="text" name="user"> <input type="password" name="pwd"> <input type="submit"> </form> <script src="jquery.js"></script> <script> $(function () { $('input[type=text]').css('width','100px'); }) </script> </body> 3.jQuery: 筛选选择器: 是对jQuery对象进行的二次筛选,以函数的形式进行调用,返回的也是jQuery对象补充知识: jQuery里面使用的this是谁 this //这个是js对象 $(this) //转成jQuery对象 $('.father').find('.g').click(function () { ...this ... } //首先是js对象,是最后一个引用事件的js对象 3.1.查找 $("p").find("span") //后代选择器 <body> <div> <p>bajie</p> <a href="#">wukong</a> <span>datang</span> <div>xiha</div> </div> <script src="jquery.js"></script> <script> $(function () { $('.g').click(function () { console.log(this); //js对象 $(this).css('color','red'); //jQuery对象 }); $('.father').find('.g').click(function () { console(this); //类名是 g 的js对象 } ); }) </script> </body> $("div").children() //子代选择器: 所有子 $('.father').children('span') //子代选择器: 指定子标签 $("p").parent() //获取父元素: 唯一 $("p").parent(".selected") //获取父元素: 唯一 <body> <div> <p>bajie</p> <a href="#">wukong</a> <span>datang</span> <div> <span>xiha</span> </div> </div> <script src="jquery.js"></script> <script> $(function () { $('.father').find('span').click(function () { $(this).css('color','red'); }); $('.father').children('span').click(function () { $(this).css('background-color','green'); }); }) </script> </body> $("div").siblings() //获取所有兄弟元素: 不包括自己,排他思想,选项卡时可用这个 $("div").siblings(".selected") //获取所有兄弟元素: 按指定条件查找 <body> <ul> <li>bajie</li> <li>wukong</li> <li>datang</li> <li>xiha</li> <li>xiaoliu</li> </ul> <script src="jquery.js"></script> <script> $(function () { $('li').click(function () { $(this).css('color','red').siblings('li').css('color','black'); }) }) </script> </body> $('a').parent('li').siblings('li').children('a') //获取所有兄弟元素:当有嵌套时: 下面的例子不点ul而点a的时候用这个 <!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } a{ text-decoration: none; color: white; } .Box{ width: 600px; height: 300px; } .Box ul{ width: 100%; overflow: hidden; } .Box ul li{ float: left; width: 100px; height: 50px; margin: 0 10px; background-color: red; text-align: center; line-height: 50px; } .active{ width: 100%; height: 200px; background-color: green; display: none; } </style> </head> <body> <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box"> <ul> <li> <a href="javascript:void(0)">bajie</a> </li> <li> <a href="javascript:void(0)">wukong</a> </li> <li> <a href="javascript:void(0)">datang</a> </li> <li> <a href="javascript:void(0)">xiha</a> </li> <li> <a href="javascript:void(0)">xiaoliu</a> </li> </ul> <div> </div> </div> <script src="jquery.js"></script> <script> $(function () { $('.Box ul li a').click(function () { $(this).css('color', 'green').parent('li').siblings('li').children('a').css('color','white'); $('.active').show().text($(this).text()); //; var textVal = $(this).text(); var newVal = `<h1>${textVal}</h1>`; //; $('.active').show().html(newVal); // }) }) </script> </body> </html> 3.2.过滤 $("p").eq(1) //按索引: 获取等于给定索引的标签 <body> <div> <p>bajie</p> <a href="#">wukong</a> <span>datang</span> <div> <span>xiha</span> </div> </div> <script src="jquery.js"></script> <script> $(function () { $('.father span').eq(0).css('color','blue'); }) </script> </body> 4.jQuery: 属性 4.1.html 代码/文本/值: 对值的操作 $('p').html() //html()里面没有参数: 是获取值 $("p").html(`Hello <b>world</b>!`) //html(`八戒`)有参数时:是设置值,html(``)里面最好使用模板字符串,可以规避很多问题 $('p').text() //text()里面没有参数: 是获取值 $("p").text("Hello World!") //text('八戒')有参数时:是设置值 $("input").val() //val()里面没有参数: 是获取值标签有value属性的时候使用 $("input").val("Hello World!") //val("八戒")有参数时:是设置值标签有value属性的时候使用 $('.Box ul').html(`<li> <a href="javascript:void(0)">bajie</a> </li> <li> <a href="javascript:void(0)">wukong</a> </li> <li> <a href="javascript:void(0)">datang</a> </li> <li> <a href="javascript:void(0)">xiha</a> </li> <li> <a href="javascript:void(0)">xiaoliu</a> </li>`); 4.2.属性: 对标签属性的操作 $("img").attr("src") //获取标签属性的值 $("img").attr({ src: "test.jpg", alt: "Test Image" }) //设置标签属性的值: 多个 $("img").attr("src","test.jpg") //设置标签属性的值: 一个 $("img").removeAttr("src alt") //删除标签属性: 删多个时用空格分隔属性: 对对象属性的操作 $("input[type='checkBox']").prop("checked"); //获取jQuery对象里指定属性的值,一般只用在input单选里 $("input[type='checkBox']").prop("status","200"); //给jQuery对象设置属性 $("input[type='checkBox']").removeProp("checked"); //删除jQuery对象的属性 <body> 男<input type="radio" name="sex" checked> //checked默认是: checked='checked' 女<input type="radio" name="sex"> <script src="jquery.js"></script> <script> $(function () { console.log($('input[type=radio]').eq(0).attr('checked')); //获取标签属性的值: 'checked' console.dir($('input[type=radio]').eq(0)[0]); //获取js对象: (ps: input标签对象里面有: checked: true) console.dir($('input[type=radio]').eq(1)[0].checked); //获取js对象里checked属性的值: false 或 true console.dir($('input[type=radio]').eq(1).prop('checked')); //获取jQuery对象里checked属性的值: false 或 true }) </script> </body> 4.3.CSS 类: 对标签属性的操作: 专门针对类名的操作 $("p").addClass("selected") //给标签追加类名: 追加多个类名时用空格分隔 $("p").removeClass() //删除全部类名 $("p").removeClass("selected") //删除一个类名 <!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <style> a{ color: red;} .active{color: green;} </style> </head> <body> <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box"> </div> <script src="jquery.js"></script> <script> $(function () { $('.Box').html(`<a id="anchor"></a>`); $('#anchor').attr('href','http://www.baidu.com').text('百度一下'); $('#anchor').attr({ title: '123',class: '456'}); //attr()可以设置类名但一般不用, 因为会把原先的类名覆盖掉, 有专门的方法 $('body').click(function () { $('#anchor').addClass('active'); $('#anchor').removeClass('active 456'); $('#anchor').removeAttr('title href'); }) }) </script> </body> </html> $('.Box').toggleClass('hidden'); //对类名的自动切换: 追加类名和删除类名之间的切换 <!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <style> .Box{ width: 200px; height: 200px; background-color: red; } .hidden{ display: none; } </style> </head> <body> <button>隐藏</button> <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box"></div> <script src="jquery.js"></script> <script> $(function () { $('button').click(function () { $('.Box').toggleClass('hidden'); //实现自动控制显示隐藏 }) }) </script> </body> </html> 5.jQuery: 效果 5.1.自定义效果 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; //第一个参数: json为动画结束时的样式 $("div").animate(json, 1000, function () { ... }); //第二个参数: 动画时间, 第三个函数: 回调函数 <!DOCTYPE html> <html> <head lang="en"> <Meta charset="UTF-8"> <title></title> <style> div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> <script src="jquery.js"></script> <script> $(function () { $("button").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; var json2 = {"width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red"}; //有个问题: 背景色没生效,需要一个插件网上找即可 $("div").animate(json, 1000, function () { $("div").animate(json2, 1000, function () { alert("动画执行完毕！"); }); }); }) }) </script> </head> <body> <button>自定义动画</button> <div></div> </body> </html> 6.核心 6.1.jQuery对象访问 $('#bar').index(); //不传递参数时，返回这个元素在同辈中的索引位置练习: 1.选项卡及对应其内容的切换: 借助jQuery对象的索引对类名的添加,删除 <!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } a{ text-decoration: none; color: white; } .Box{ width: 600px; height: 300px; } .Box ul{ width: 100%; overflow: hidden; } .Box ul li{ float: left; width: 100px; height: 50px; margin: 0 10px; background-color: red; text-align: center; line-height: 50px; } .hidden{ width: 100%; height: 200px; background-color: green; display: none; } .show{ display: block; } </style> </head> <body> <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box"> <ul> <li> <a href="javascript:void(0)">bajie</a> </li> <li> <a href="javascript:void(0)">wukong</a> </li> <li> <a href="javascript:void(0)">datang</a> </li> <li> <a href="javascript:void(0)">xiha</a> </li> <li> <a href="javascript:void(0)">xiaoliu</a> </li> </ul> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <script src="jquery.js"></script> <script> $(function () { $('.Box ul li a').click(function () { $(this).css('color', 'green').parent().siblings().children().css('color','white'); //选项卡部分的切换实现 var textVal = $(this).text(); var newVal = `<h1>${textVal}</h1>`; var index = $(this).parent().index(); //获取ul的索引值 $('div.hidden').eq(index).addClass('show').html(newVal).siblings('div.hidden').removeClass('show').html(''); }) //内容区域的切换实现 }) </script> </body> </html> 2.轮播图:按箭头实现内容的切换,也是用到了索引 <!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } a{ text-decoration: none; color: white; } .Box{ width: 600px; height: 300px; } .Box ul{ width: 100%; overflow: hidden; } .Box ul li{ float: left; width: 100px; height: 50px; margin: 0 10px; background-color: red; text-align: center; line-height: 50px; } .active{ width: 100%; height: 200px; background-color: green; display: none; } .show{ display: block; } </style> </head> <body> <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box"> <button>下一张</button> //加个按钮 <ul> <li> <a href="javascript:void(0)">bajie</a> </li> <li> <a href="javascript:void(0)">wukong</a> </li> <li> <a href="javascript:void(0)">datang</a> </li> <li> <a href="javascript:void(0)">xiha</a> </li> <li> <a href="javascript:void(0)">xiaoliu</a> </li> </ul> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <script src="jquery.js"></script> <script> $(function () { var count = 0; $('.next').click(function () { count++; if(count == 5){ count = 0; }; console.log(count); $('ul li').eq(count).css('backgroundColor','green').siblings().css('backgroundColor','red'); $('div.active').eq(count).addClass('show').html('八戒').siblings('div.active').removeClass('show').html(''); }); }) </script> </body> </html> 3.百度换肤里的选项卡的实现 <!doctype html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } .header{ height: 46px; } .header ul{ float: left; height: 46px; } .header ul li{ float: left; height: 46px; padding: 0 10px; background: none; transition: background 500ms; /*过度的效果: c3里面的动画效果, 500毫秒颜色的渐变*/ cursor: pointer; } .header ul li:first-child{ background-color: #389cff; } .header ul li:first-child a { color: #fff; } .header ul li a{ color: #666; display: inline-block; /*加上这句, 就形成了BFC区域, 下面的margin-top才会生效*/ margin-top: 19px; } .header ul li:hover{ background-color: #389cff !important; /*用户点击其中一个li后, hover就不起作用了: 用!important优先级可以无限大,谁都改不了,少用*/ transition: prop 1s; } .header ul li:hover a{ color: #fff; } </style> </head> <body> <div> <ul> <li> <a href="javascript: void(0)">热门</a> </li> <li> <a href="javascript: void(0)">游戏</a> </li> <li> <a href="javascript: void(0)">卡通</a> </li> <li> <a href="javascript: void(0)">女神降临</a> </li> <li> <a href="javascript: void(0)">明星</a> </li> <li> <a href="javascript: void(0)">风景</a> </li> <li> <a href="javascript: void(0)">简约</a> </li> </ul> </div> <script src="jquery.js"></script> <script> $(function () { $('div ul li').click(function () { $(this).css('background','#389cff').siblings().css('background','#fff'); $(this).find('a').css('color', '#fff').parent().siblings().find('a').css('color', '#666'); }) }); </script> </body> </html>

关于jQuery和CSS中最快的选择器方法-ID是否？和jquery css选择器的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于6款新颖的jQuery和CSS3进度条插件推荐_jquery、CSS和jQuery中的选择器：只是类/ id,还是标签？、css选择器和jQuery选择器、day02 jQuery jQuery与js的转换链式编程 jQuery: CSS 选择器筛选属性效果核心等相关内容，可以在本站寻找。

本文标签：