jQuery

2022/3/20 6:28:06

编程Tag： jQuery 标签 css 元素 li ul background

本文主要是介绍jQuery，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.first()：获取匹配的第一个元素
//获取ul中所有的li元素，然后找到第一个元素
$("ul>li").first().css("background","blue");
$("ul>li:first").css("background","red");
2.last()：获得匹配的最后一个元素
//从元素数组中找到最后一个元素
$("ul>li").last().css("background","blue");
3.eq(N)：获取匹配的第N或-N个元素
//从元素数组中找到指定的某一个元素
$("ul>li").eq(2).css("background","yellow");
4.filter(selector)：筛选出与指定表达式匹配的元素集合
//从元素数组中找到属性title为a的元素
$("ul>li").filter("[title=a]").css("background","red");
//筛选出有title属性的元素集合
$("ul>li").filter("[title]").css("background","red");
//筛选出有title属性或者title属性不等于b的元素集合
$("ul>li").filter("[title][title!=b]").css("background","red");
5.has(selector)：筛选出包含特定特点的元素的集合
//从元素数组中筛选出有<span>标签的元素集合
$("ul>li").has("span").css("background","red");
6.not(selector)：筛选出不包含特定特点的元素的集合
//从元素数组中筛选出没有title属性的元素集合
$("ul>li").not("[title]").css("background","red");
2.查找
在jQuery对象数组中，根据选择器查找孩子、父母、兄弟标签

1.children()：子标签中找
//查找ul的所有子标签,并且指定为li子标签
$("ul").children("li").css("background","red");
2.find()：后代标签中找
//查找ul下面所有的span标签
$("ul").find("span").css("background","red");
3.parent()：父标签
//查找b标签的父元素标签
$("b").parent().parent().css("border","1px solid red");
//parents() 查找所有的父节点，直到根节点找到后结束
console.log($("b").parents());
4.prevAll()：前面所有的兄弟标签
//查找第三个li标签前面所有的兄弟标签
$("ul").children("li").eq(2).prevAll("li").css("background","red");
5.nextAll()：后面所有的兄弟标签
//查找第三个li标签后面所有的兄弟标签,并且只能是li标签
$("ul").children("li").eq(2).nextAll("li").css("background","red");
6.siblings()：前后所有的兄弟标签
//查找第三个li标签所有的兄弟标签
$("ul").children("li").eq(2).siblings("li").css("background","red");
jQuery 文档处理
增加
内部插入(后面)

1.append()：将内容添加到指定的元素后面
//插入到最后面(给ul中最后一个li中插入一个a)
$("ul").children("li").last().append($("<a href='#'>点一下</a>"));
2.appendTo()：和append()颠倒
//插入到最后面(给ul中最后一个li中插入一个a),使用appendTo()
($("<a href='#'>点一下</a>")).appendTo($("ul").children("li").last());
内部插入(前面)

3.prepend()：将内容添加到指定元素前面
//插入到最前面(给ul中第一个li中插入一个a)
$("ul").children("li").first().prepend($("<a href='#'>点一下</a>"));
4.prependTo():和prepend()颠倒
//插入到最前面(给ul中第一个li中插入一个a),使用prependTo
($("<a href='#'>点一下</a>")).prependTo($("ul").children("li").first());
外部插入

5.after()：在匹配元素之后插入内容
//在属性title为b前面添加一个li
$(".oBox>ul").children("li").filter("[title=b]").after($("<li>你好</li>"));
6.before()：在匹配元素之前插入内容
//在属性title为b后面添加一个li
$(".oBox>ul").children("li").filter("[title=b]").before($("<li>你好</li>"));
删除
1.empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
//清空ul中所有li的内容，使用empty()
$(".oBox>ul").children("li").empty();
2.remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
//移除ul中所有的li，使用remove()
$(".oBox>ul").children("li").remove();
修改
1.replaceWith()：将所有匹配的元素替换成指定的内容
//把li下面所有的span标签替换为<a>标签
$(".oBox>ul>li").find("span").replaceWith("<a href='#'>点一下</a>")
clone   复制ul中的第一个子节点追加到末尾
$(".oBox>ul").append($(".oBox>ul").children("li").first().clone(false));
城市选择案例
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           select {
               width: 200px;
               background-color: teal;
               height: 200px;
               font-size: 20px;
           }

           .btn-box {
               width: 30px;
               display: inline-block;
               vertical-align: top;
           }
       </style>
       <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function() {
               //全部到右边
               $("#btn-sel-all").click(function() {
                   //拿到select所有option项，添加到右边
                   $("#src-city>option").appendTo($("#tar-city"));
               });
               //全部到左边
               $("#btn-sel-none").click(function() {
                   //拿到右边select所有option项，添加到左边
                   $("#tar-city>option").appendTo($("#src-city"));
               });
               //选中的添加到右边
               $("#btn-sel").click(function() {
                   //找到左边被选中的，添加到右边
                   $("#src-city>option:selected").appendTo($("#tar-city"));
               });
               //选中的添加到左边
           $("#btn-back").click(function() {
                   //找到右边被选中的，添加到左边
                   $("#tar-city>option:selected").appendTo($("#src-city"));
               });
           });
       </script>
   </head>
   <body>
       <h1>城市选择：</h1>
       <select id="src-city" name="src-city" multiple>
           <option value="1">北京</option>
           <option value="2">上海</option>
           <option value="3">深圳</option>
           <option value="4">广州</option>
           <option value="5">西红柿</option>
       </select>
       <div class="btn-box">
           
           <button id="btn-sel-all"> >> </button>
           <button id="btn-sel-none"> << </button>
           <button id="btn-sel"> ></button>
           <button id="btn-back"> < </button>
       </div>
       <select id="tar-city" name="tar-city" multiple>
       </select>
   </body>
</html>

这篇关于jQuery的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery

相关编程文章