Go to comments

jQuery 初探

一、jQuery和原生js的区别

从字面上就可以知道  jQuery 等于 javaScript + jQuery ，JQ强大的DOM节点查询，把查询节点简化到极致，把节点的增删改查简化到极致，至于怎么操作，那是自己的事


1、举一个例子，设置A链接为红色，点击后加10像素的红色边

使用原生态js

<a href="###">这是一个连接</a>

<script>

var a = document.getElementsByTagName('a')[0];

a.style.color="red";

a.onclick = function(){

    this.style.border='10px solid red';

}

</script>


jQuery链式操作一行代码就可以实现

<a href="###">这是一个连接</a>

<script>

var a = $('a');

a.css('color','pink').click(function(){

    $(this).css('border','10px solid green');

});

</script>


2、第二个例子，点击p标签，弹出p标签的内容

原生js需要循环p标签

<p>第一个p标签</p>
<p>第二个p标签</p>
<p>第三个p标签</p>

<script>

var p = document.getElementsByTagName('p');

var len = p.length;

for (var i =0, i < len; i++) {

    p[i].onclick=function(){
        alert(this.innerHTML);
    }
}

</script>


jQuery的隐式迭代，不需要循环

<p>第一个p标签</p>
<p>第二个p标签</p>
<p>第三个p标签</p>

<script>

var p = $('p').click(function(){

    alert($(this).html());

});

</script>


二、CDN

http://cdn.code.baidu.com

http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js

http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js


CDN的路径失效后，自动切换本地的jQuery

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.min.js"><\/script>');</script>


三、页面加载完后在执行js代码

原生态 window.onload 方法

1. 要图片、flash、音频、视频都加载完后才执行

2. 一个页面只能写一个window.onload方法

alert('看不到文字');

window.onload=function(){

   alert('看到文字了');
}


用jQuery的ready方法，DOM加载完后就可以执行，而且可以写N个

$(document).ready(function(){

    alert('看见文字了');

});


简写

$(function(){
    
    alert('简写版');

});


四、jQuery对象和DOM对象

用原生DOM方法获得的对象就是DOM对象

<p id="p">分别用js与jQuery获得文字内容</p>

<script>

var p = document.getElementById('p');

alert(p.innerHTML);

</script>


用jQuery选择器得到的对象就是jQuery对象

<p id="p">分别用js与jQuery获得文字内容</p>

<script>

$(function(){

    var p-jQuery = $('p');

    alert(p-jQuery.html()); // PS：这里不能用原生js的innerHTML，只能用jqery的html()方法

});

</script>


DOM对象不能使用任何jQuery方法，只能使用DOM方法，

如果DOM对象中方法，在jQ库中被改写过的就可以使用，比如 length  和  toString() 在jQuery中被改写过的（那些被改写过，目前不太清楚）

alert(p.length); // 1

alert(p.toString()); // [object Object]


jQuery对象转换成DOM对象

1. index索引

2. get()方法

<input type="text" id="a" value="随便打几个字" />

<script>

$(function(){

    var input = $('#a');

    alert(input.val()); // jQuery方法

    alert(input[0].value); // jQuery转换原生DOM对象

    alert(input.get(0).value); // 使用get()方法转成原生DOM

});

</script>


原生DOM对象转换城jQuery对象，只要DOM对象用  $()  包起来就OK

$(function(){

    var input-jQuery = document.getElementById('a');

    alert($(input-jQuery).val()); 

});


五、jQuery和其它库共存

使用 jQuery.noConflict() 方法释放$权限

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
<meta charset="UTF-8">
<title>jquery和其它库共存</title>
</head>
<body>

<input type="text" id="libai" value="窗前明月光">

<script type="text/javascript">

jQuery.noConflict(); // 释放$

alert($F('libai')); // 使用prototypejs.org库

alert(jQuery('#libai').val()); // 用的是jQuery不是$

</script>
</body>
</html>


也可以定义一个变量替代$

var sowhat = jQuery.noConflict();

alert(sowhat('#libai').val()); // 窗前明月光


还有一种方法在大型项目中会用到

在引入库时候，先引入jquery.min.js在引入prototype.js

src="jquery.js"

src="prototype.js"

应用时候也先jquery在prototype

alert($('#libai').val());

alert($F('libai'));


js与jqeury的比较

js原生态写法

1. 页面加载完毕的时候，让a标签里的文字变成红色

2. 点击a标签的时候，给a标签加上黄色的边框

<a href="#">aaaaa</a>

<script>
   
    //js原生态写法
    var a = document.getElementsByTagName('a')[0];

    a.style.color = "red";

    // 匿名函数后面要加分号
    // 什么是匿名函数？
    // 创建一个函数并将它赋值给变量，这种情况下创建的函数，即匿名函数（函数表达式就是匿名函数）
    a.onclick = function(){

        this.style.border = "10px solid #f90";

    };
    
</script>


jquery写法

$('a').css('color' ,'red').click(function(){

    $(this).css('border' ,'10px solid #38a38a');

});


Example2

js原生态的写法，当点击每个p标签的时候，我要弹出当前p标签里的内容

<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>

<script>

var p = document.getElementsByTagName('p');

for(var i=0;i<p.length;i++){

    p[i].onclick = function(){

        alert(this.innerHTML);

    };

}
 
</script>


一般情况下不需要循环便利dom对象

$('p').click(function(){

    alert($(this).html());

});


jquery对象与其他js库如何共存

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery对象与其他js库如何共存</title>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!--
大型项目中不止使用一个库
使用jquery中的noConflict()方法释放$的控制权
-->
<input type="text" id="a" value="input标签">

<script>
    // 使用jquery noConflict()方法释放$的控制权
    jQuery.noConflict();
    
    alert('这是prototype库弹出的'+$F('a'));
    alert('这是jquery弹出的'+jQuery('#a').val());
</script>
</body>
</html>


demo 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
    <!-- 两个库的引入次序，先引入jquery ,也能解决目前这个例子的问题-->
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
</head>
<body>
<input type="text" id="a" value="input标签">
<script>
    alert('这是prototype弹出的'+$F('a'));
    
    alert('这是jquery弹出的'+jQuery('#a').val());
</script>
</body>
</html>


demo3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery对象与其他js库如何共存</title>
<script src="http://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<!--
    大型项目中不止使用一个库
    使用jquery noConflict()方法释放$的控制权
-->
<input type="text" id="a" value="input标签">
<script>
    //不用jQuery定义成Glee
    var Glee = jQuery.noConflict();
    
    alert('这是prototype弹出的'+$F('a'));
    alert('这是jquery弹出的'+Glee('#a').val());
</script>
</body>
</html>



Leave a comment 0 Comments.

Leave a Reply

换一张