* 通用选择器
.class 类选择器,一个元素可以有多个类(chrome使用原生js函数getelementbyclassname()实现)
利用类选择器改变元素的样式
<div class="demo"></div> <script type="text/javascript"> $('.demo').css({ border: '3px solid red', }) </script>
利用元素选择器查找文档中的元素,添加css样式
<script type="text/javascript"> $('div').css({ color: 'skyblue', }) </script>
查找id元素添加样式
<div id="demo">demo3</div> <script type="text/javascript"> $('#demo').css({ border: '3px solid skyblue', }) </script>
<div> <p></p> </div> <script type="text/javascript"> $('div>p').css({ border: '3px solid skyblue', }) </script>
选择.demo和#demo,以逗号为间隔隔开
<div class="demo">demo2</div> <div id="demo">demo3</div> <script type="text/javascript"> $('.demo, #demo').css({ border: '2px solid red', }) </script>
注意:会选择该元素下所有匹配合适的元素
此例中所有的p均会被加上border样式
<div> <p>demo</p> <p>demo</p> <p>demo</p> </div> <script type="text/javascript"> $('div p').css({ border: '1px solid skyblue', }) </script>
此例中选择只有div下面类名为demo的元素
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> <script type="text/javascript"> $('div.demo').css({ color: 'red', }) </script>
注意:元素之间的关系必须是同级即兄弟元素,不能为父子关系
此例中选择的是仅紧跟着p标签的第一个span标签,故会改变1的样式
<p></p> <span>1</span> <span>2/span> <span>3</span> <script type="text/javascript"> $('p+span').css({ border: '2px solid blue', }) </script>
同第五个next选择器,只不过选择的范围不同
此例中会选择p标签之后的所有span标签,改变样式
<p></p> <span>1</span> <span>2/span> <span>3</span> $('p~span').css({ border: '2px solid blue', })
$('div[title]')
查找所有属性名为title的元素
此例三个div均会被添加border样式
<div title = "demo"></div> <div title = "demo"></div> <div title = ""></div> $('div[title = demo]').css({ border: '5px solid skyblue', })
$('div[title = demo]')
查找title的属性值为demo的所有元素并设置样式
此例加边框样式的只有第一个第二个div
<div title = "demo"></div> <div title = "demo"></div> <div title = ""></div> $('div[title = demo]').css({ border: '5px solid skyblue', })
跟[attribute = value]基本类似,均是选择属性名等于该属性值的所有元素
div[title^=demo]
查找title属性是以demo开头的元素
此例三个div中只有前两个div会被选择改变样式
<div title = "demo"></div> <div title = "demodemo"></div> <div title = "de"></div> $('div[title = demo]').css({ border: '5px solid skyblue', })
div[title$=demo]
查找title属性是以demo结尾的元素
此例三个div中前三个div会被选择改变样式
<div title = "demo"></div> <div title = "demo demo"></div> <div title = "demodemo"></div> <div title = "de"></div> $('div[title $= demo]').css({ border: '5px solid skyblue', })
这个选择器等同于 :not([attr=value]) 即非
div[title!=demo]
原生dom提供queryselectorall()提高查询的性能
此例中选择title不等于demo的元素,即第一个和第三个
<div title = "demo"></div> <div title = "demodemo"></div> <div title = "de"></div> $('div[title != demo]').css({ border: '5px solid skyblue', })
div[title*=demo]
此例中第一个和第二个div均包含demo,所以选择第一二个div元素
<div title = "demo"></div> <div title = "demodemo"></div> <div title = "de"></div> $('div[title*=demo]').html('jianmei');
此例中第一个和第三个中都含有demo,且第二个有空格,故选择的是第一个和第三个
__注意:__若此例中使用div[title=demo],则选择的只有第一个
<div title = "demo"></div> <div title = "de demo"></div> <div title = "demodemo"></div> <div title = "de"></div> $('div[title~=demo]').html('jianmei');
eq = equal平等的,即是等于index的值
此例中选择的是index等于0的div
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> $('div:eq(0)').css({ color: 'red', })
gt = great than 即是大于index的值
此例中第二个和第三个div会被选择,选择的是index大于0的元素
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> $('div:gt(0)').css({ color: 'red', })
lt = less than 即是小于index的值
此例中第一个和第二个div会被选择,选择的是index小于0的元素
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> $('div:lt(2)').css({ color: 'red', })
此例中选择的是第二个和第四个div,index分别为1,3
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> <div class="demodemo">demo4</div> $('div:odd').css({ color: 'red', })
5.:even 选择__index为偶数__的元素,并不是按照视觉可见的顺序
此例中选择的是第一个和第三个div,index分别为0,2
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> <div class="demodemo">demo4</div> $('div:even').css({ color: 'red', })
此时的顺序是视觉上可见的顺序
此例中仅选择第一个div
<div class="demo">demo1</div> <div class="demo">demo2</div> $('div:first').html('jianmei');
此例中仅选择最后一个div
<div class="demo">demo1</div> <div class="demo">demo2</div> $('div:last').html('jianmei');
此例中的h1和h2均会被选择,改变样式
<h1>jianmei</h1> <h2>jianmei</h2> $(':header').css({ background: 'skyblue', })
这里只写.not(selector)方法
此例中选择的是index不是奇数的div,所以选择的是第一个和第三个div
<div class="demo">demo1</div> <div class="demo">demo2</div> <div id="demo">demo3</div> <div class="demodemo">demo4</div> $('div').not(':odd').css({ border: '2px solid skyblue', })
注意:此例中只有第一个和第二个span元素均会被选中,:lang会选中含有language或者第一个符合的language的元素,并不是只要含有language的元素都会被选择
<span lang = "en">1</span> <span lang = "en-mei">2</span> <span lang = "mei-en">3</span> $('span:lang(en)').css({ border: '2px solid red', })
此例中会向每一个p中添加一个html
<p>demo</p> <p>demo</p> <p>demo</p> $('<b></b>').html($(':root')[0].nodename).appendto('p');
例如:给定url :
$('p:target');
将选择 <p id = 'foo'>
的元素
为了更好的使用效果,首先使用纯css选择器选择元素,然后使用.filter(":animated")
为了获得更好的性能,首先使用纯css选择器选择元素,然后使用.filter(':parent')
注意:parent涉及的子元素包含文本节点
此例中选择的是第一个和第二个div,因为只有第三个是没有子元素和文本节点的
<div><p></p></div> <div> </div> <div></div> $('div:parent').css({ border: '3px solid skyblue', })
此例中选择的是第三个div,因为只有第三个是没有子元素和文本节点的
<div><p></p></div> <div> </div> <div></div> $('div:empty').css({ border: '3px solid skyblue', })
$('div:has(p)')
选择一个div,这个div内至少含有一个p标签
此处选择的是第一个div,只有第一个div内含有p标签
<div><p></p></div> <div></div> $('div:has(p)').css({ border: '2px solid skyblue', })
$('div:has(mei)')
查找所有含有mei的div
<div>jian mei</div> <div>mei</div> $('div:contains(mei)').css({ border: '2px solid skyblue' })
元素可以被认为是隐藏的几种情况:
元素visibility:hidden和opcity:0被认为是可见的,因为他们仍然占据文档空间,
使用:hidden()查询不能充分利用原生dom提供的queryselectorall()方法来提高性能。为了在现代浏览器上获得更佳的性能,请使用.filter(":hidden")代替
此例中div本来是隐藏的,选择的是有隐藏元素的div,并在3s之后显示
```js
// :hidden $('div:hidden').show(3000); ```
跟hidden用法相反
<p>demo</p> <p>demo</p> <p>demo</p> $('p:visible').click(function() { $(this).css({ background: 'skyblue', }) })
此例中仅div下面的第一个p改变样式
<div> <p>demo</p> <p>demo</p> <p>demo</p> </div> $('div p:first-child').css({ 'text-decoration': 'underline', })
注意:此例中跟first-child不一样的地方是,first-child只选择直系的第一个,如果第一个不是,则不选择,first-of-type选择的是只要包含有就选择包含的第一个兄弟元素,此处选择的是div内包含的p标签的第一个
<div> <a href=""></a> <p>demo</p> <p>demo</p> <p>demo</p> </div> $('div p:first-of-type').css({ background: 'red', })
此例中仅div下面的最后一个p改变样式
<div> <p>demo</p> <p>demo</p> <p>demo</p> </div> $('div p:last-child').css({ 'text-decoration': 'underline', })
原理同上:first-of-type,
<div> <a href=""></a> <p>demo</p> <p>demo</p> <p>demo</p> </div> $('div p:last-of-type').css({ background: 'red', })
index:匹配的索引值,从1开始,可以是even(偶数) odd(奇数)2n
注意:和eq()不一样的地方是,eq()的索引是从0开始的
<div> <button></button> <button></button> </div> <div> <button></button> </div> $('div:nth-child(2)').click(function () { $(this).css({ border: '2px solid skyblue', }); });
此例中,只有第二个div内有唯一一个button,所以选择的是第二个,在第二个button内添加文本:alone
<div> <button></button> <button></button> </div> <div> <button></button> </div> $('div button:only-child').text('alone').css({ border: '2px solid skyblue', }
index是从1开始的,可以是字符串even或者odd或者是方程式:nth-of-type(even), :nth-of-type(4n)
此例中选择的是第一个div内的button兄弟元素的第二个
<div> <button></button> <button></button> </div> <div> <button></button> </div> $('div button:nth-of-type(1)').text('alone').css({ border: '2px solid skyblue', }
此例中两个元素均被选择且添加move样式
<input type="button" value="input button"/> <button>button</button> $(':button').addclass('move');
<input type="checkbox" /> $(':checkbox').wrap("<span style='background-color:red'>"); ---------------------------------------------------------- //最好这样写 $('[type = checkbox]').wrap("<span style='background-color:red'>");
此例中选择了第三个处于选中状态的input
```js
$('input:checked').wrap("<span style='background-color:red'>"); ```
此例中选择第一个input
<input type="checkbox" disabled/> <input type="checkbox" /> $('input:disabled').wrap("<span style='background-color:red'>");
此例中选择第二个input
<input type="checkbox" disabled/> <input type="checkbox" /> $('input:enabled').wrap("<span style='background-color:red'>");
此例中选择的是当前获取焦点的input,且该input的类型为text,再设置样式
<input type="text" /> $('input[type = text]').focus(function () { $(this).css({ background:'red', }) })
总结::file :image :input : password :radio :reset :select :submit :text
均是选择所有类型为该属性的元素用法同上。
如对本文有疑问, 点击进行留言回复!!
VScode中的react自动补全标签代码及黄色or红色警告
关于React处理input的方法和多个input共用一个方法(不用jQuery)
网友评论