码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 基础

时间:2016-04-28 23:52:39      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:

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.cnblogs.com/bruceg/p/5444667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!