jQuery教程

jQuery

本文主要是介绍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"> &gt;&gt; </button>
            <button id="btn-sel-none"> &lt;&lt; </button>
            <button id="btn-sel"> &gt;</button>
            <button id="btn-back"> &lt; </button>
        </div>
        <select id="tar-city" name="tar-city" multiple>
        </select>
    </body>
</html>

这篇关于jQuery的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航