初识jQuery

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/

posted @ 2016-02-21 01:32  杨英华Allen（夏佐）  阅读(484)  评论(0)  编辑  收藏  举报