jquery 选择器
时间:2023年10月23日
/来源:网络
/编辑:佚名
当元素处于同级时,比如以下这种调用,点击对应的li标签,li标签同级对应的div标签才会显示
html代码:
<ul id="open_list">
<li class="product_Level" data-fid="1">
<a>云服务器</a>
</li>
<div data-id="1" class="list_nome open_list_item">
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=1">西南-绵阳电信</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=2">西南-西云高防&BGP</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=3">香港-精品CN2</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=8">美国-CN2直连高防</a>
</div>
</li>
</div>
<li class="product_Level active " id="open" data-fid="2">
<a>物理机</a>
</li>
<div data-id="2" class="list_nome1 open_list_item">
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=4">韩国CN2</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=5">枣庄高防&amp;双线</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=6">枣庄高防&三线</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second active ">
<a class="text-white" href="/cart?fid=2&gid=9">香港CN2直连活动机</a>
</div>
</li>
</div>
</ul>
这时候用jquery来实现点击展示或者消失的效果,就需要用到选择器了。
jquery:
$('#open_list .open_list_item[data-id='+ $(this).attr('data-fid') +']')
这里放一个,点击li,然后li同级的div可以轻松选择到。
[attribute] $(“[href]”) 所有带有 href 属性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 属性的值等于 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 属性的值不等于 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 属性的值包含以 “.jpg” 结尾的元素
html代码:
<ul id="open_list">
<li class="product_Level" data-fid="1">
<a>云服务器</a>
</li>
<div data-id="1" class="list_nome open_list_item">
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=1">西南-绵阳电信</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=2">西南-西云高防&BGP</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=3">香港-精品CN2</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=1&gid=8">美国-CN2直连高防</a>
</div>
</li>
</div>
<li class="product_Level active " id="open" data-fid="2">
<a>物理机</a>
</li>
<div data-id="2" class="list_nome1 open_list_item">
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=4">韩国CN2</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=5">枣庄高防&amp;双线</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second ">
<a class="text-white" href="/cart?fid=2&gid=6">枣庄高防&三线</a>
</div>
</li>
<li class="products-secondary">
<div class="product_second active ">
<a class="text-white" href="/cart?fid=2&gid=9">香港CN2直连活动机</a>
</div>
</li>
</div>
</ul>
这时候用jquery来实现点击展示或者消失的效果,就需要用到选择器了。
jquery:
$('#open_list .open_list_item[data-id='+ $(this).attr('data-fid') +']')
这里放一个,点击li,然后li同级的div可以轻松选择到。
[attribute] $(“[href]”) 所有带有 href 属性的元素
[attribute=value] $(“[href=’#’]”) 所有 href 属性的值等于 “#” 的元素
[attribute!=value] $(“[href!=’#’]”) 所有 href 属性的值不等于 “#” 的元素
[attribute$=value] $(“[href$=’.jpg’]”) 所有 href 属性的值包含以 “.jpg” 结尾的元素
新闻资讯 更多
- 【建站知识】查询nginx日志状态码大于400的请求并打印整行04-03
- 【建站知识】Python中的logger和handler到底是个什么?04-03
- 【建站知识】python3拉勾网爬虫之(您操作太频繁,请稍后访问)04-03
- 【建站知识】xpath 获取meta里的keywords及description的方法04-03
- 【建站知识】python向上取整以50为界04-03
- 【建站知识】scrapy xpath遇见乱码解决04-03
- 【建站知识】scrapy爬取后中文乱码,解决word转为html 时cp1252编码问题04-03
- 【建站知识】scrapy采集—爬取中文乱码,gb2312转为utf-804-03