jQuery

2022-03-20 00:02:29 阅读：159 来源： 互联网

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,标签,元素,li,ul,background,css
来源： https://blog.csdn.net/m0_62812502/article/details/123605840

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery