初识jQuery

最新推荐文章于 2024-09-16 20:08:29 发布

dengxie3415

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量69

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yangyinghua/p/5204342.html

版权

jQuery是什么？

简单来说 jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。

第一个知识点：[jQuery几种写法]

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    //jQuery写法

    /*方式一
    $(document).ready(function(){
        alert('allen')
    });*/
    
    /*方式二
     jQuery(function(){
        alert('go go go ...');
    });*/
    
    /*方式二 简写
    $(function(){
        alert('go go go ...');
    });*/
    
    /*
    $(function(){
        var div1=document.getElementById('div1');
        div1.style.background='red';
        div1.style.height="100px";
    });*/
    
    //改变jQuery默认写法：
    /*
    var jq=jQuery.noConflict()
    jq(function(){
        alert("aaaa");
    });*/
</script>

第二个知识点【jQuery几种选择器】：

(其中大部分我都注释掉了，去注释可直接运行)

注：jQuery代码可直接写一个".js"结尾的文件中，下面是为了方便学习，直接全部写在了html这一个文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--<div id="div1">div1</div>-->
    <div id="div1">
        <p class="ll"></p>
        <p class="ll"></p>

        <p class="go"></p>
        <p class="go login regis"></p>
        <p class="go-1"></p>
        <p class="go-2"></p>
        <p class="goo-1"></p>

        <p class="ps"></p>
        <p class="ps"></p>

        <a class="ps"></a>
        <a class="ps"></a>

        <a href="http://www.baidu.com" target="_blank"></a>
        <a href="http://www.baidu.com" target="_blank"></a>
        <a href="http://www.baidu.com"></a>
        <a href="http://www.yangyinghua.com"></a>
        <a href="http://www.yangyinghua.com"></a>

        <div class="ll"></div>
        <div class="ll"></div>
        <div class="ll"></div>
    </div>

    <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        
        //（1）核心选择器：

        /*比如jQuery 中 length属性，：jQuery中有多少元素*/

        //选择所有元素
        /*
        $(function(){
            alert($("*").length); // *代表选取所有元素
        });*/
        /*
        $(function(){
            alert($("#div1 *").length);
        });*/

        //选择特定类型的元素
        /*
        $(function(){
            alert($("div").length);
        })*/

        //选择具有特定class的元素
        /*
        $(function(){
            alert($("p.ll").length);
        });*/

        //选择具有特定class的某类元素
        /*
        $(function(){
            alert($("p.ll").length);
        });*/

        //选择具有特定id属性值的元素
        /*
        $(function(){
            alert($("#div1").length);
        });*/


        //（2）属性选择器

        //选取定义了attr（attr只是一个名字而已）属性的元素，即使这个属性没有值
        /*
        $(function(){
            alert($("[href]").length);
        });*/

        //选取attr属性值等于字符串val的元素
        /*
        $(function(){
            alert($("[href='http://www.yangyinghua.com']").length);
        });*/

        //选取attr属性值等于字符串val的元素
        /*
        $(function(){
            alert($("[class^='l']").length);
        });*/

        //选取attr属性值以字符串val结尾的元素
        /*
        $(function(){
            alert($("[class$='l']").length);
        });*/

         //选取attr属性值包含字符串val的元素
        /*
        $(function(){
            alert($("[class*='l']").length);
        });*/

        //选取attr属性值其中一个值是字符串val的元素
        /*
        $(function(){
            alert($("[class~='login']").length);
        });*/

        //选取attr属性值等于字符串val，或属性值为连字符分割的值列表且第一个值是字符串val的元素
        /*
        $(function(){
            alert($("[class|='go']").length);
        });*/

        //复合属性选择器，需要同时满足多个条件时使用
        /*
        $(function(){
            alert($("[href='http://www.baidu.com'][target='_blank']").length);
        });*/

        $(function(){
            alert($("p[class='ps']").length);
        });
        
        //还有其他选择器知识之后补充...
    </script>

</body>
</html>

持续更新中...

关于jQuery学习更多链接：http://www.w3school.com.cn/jquery/

转载于:https://www.cnblogs.com/yangyinghua/p/5204342.html