首页 > 代码库 > JQuery总结

JQuery总结

2024-09-08 09:33:43   219人阅读

1.通过CSS进行选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A 通过CSS进行选择</title>
    <style>
        .alinked{
            color: aqua;
        }
    </style>
    <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.4.min.js"></script>

    <script type="text/javascript">
        /*
           与window.onload的区别就是 这个可以当框架加载完毕就执行
           实现在#followMe 后面追加标签
         */
        $(function () {
            $("<p>second p</p>").insertAfter("#followMe");

            //选择节点
            //$("p a#alink").addClass("alinked");

            //选择父元素的所有满足条件的直接子节点,
            // $(" #followMe p>a").addClass("alinked");  //这样的顺序不对不能实现效果
            //$(" p#followMe > a").addClass("alinked");  //p和id之间不能空格


            //特性选择器
            //匹配所有以http开头的a标签  正则的表达方法一样
          $("a[href^=http]").addClass("alinked");
          //a[href$=pdf] 以...结尾
            //a[href*=pdf] 包含这个
          //匹配所有带有特定method的表单   from[method]
          //input[type=text]
            // li:has(a)  li里面包含a标签的 找到的结果是li标签  （li a） 这样的找到的是a标签
        });

    </script>
</head>
<body>

<p id="followMe"> FollowMe
    <a id="alink" href="http://www.baidu.com"> woshi A link</a>
    <a id="alink1" href="http://www.mamicode.com/#"> woshi B link</a>
    <span><a id="alink2" href="http://www.mamicode.com/#"> woshi C link</a></span>
</p>

<p id="followMe2"> FollowMe
    <a id="alink00" href="http://www.mamicode.com/#"> woshi AA link</a>
    <a id="alink11" href="http://www.mamicode.com/#"> woshi BB link</a>
    <span><a id="alink22" href="http://www.mamicode.com/#"> woshi CC link</a></span>
</p>

</body>
</html>

 

 

技术分享

技术分享

 

2.通过位置对元素进行选择

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过位置选择</title>
</head>
<style>
    .alinked{
        color: aqua;
    }
</style>
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">
    $(function(){
        $("#followMe2 a:first").addClass("alinked");   //第一个出现的a标签
//        $("#followMe a:odd").addClass("alinked"); // 所有为奇数的段落
        $("#followMe a:even").addClass("alinked"); //所有为偶数的段落 但是是从0开始的
        //$("li:last-child")
        //$("li:first-child")
        //$("li:nth-child(n)")  第n个子节点  从1开始计数 其他的都从0开始
    });

</script>
</head>
<body>

<p id="followMe"> FollowMe
    <a id="alink" href="http://www.baidu.com"> woshi A link</a>
    <a id="alink1" href="http://www.mamicode.com/#"> woshi B link</a>
    <span><a id="alink2" href="http://www.mamicode.com/#"> woshi C link</a></span>
</p>

<p id="followMe2"> FollowMe
    <a id="alink00" href="http://www.mamicode.com/#"> woshi AA link</a>
    <a id="alink11" href="http://www.mamicode.com/#"> woshi BB link</a>
    <span><a id="alink22" href="http://www.mamicode.com/#"> woshi CC link</a></span>
</p>
</body>
</html>

3.自定义选择

 技术分享

 

JQuery总结


联系
我们