jquery（2） - 爱码网

jquery设计思想之写法：

1、方法函数化　　　　2、链式操作　　　　3、取值赋值合体

window.onload = function(){};--js

$(function() {});---jq(把函数写到$()参数里面)

function $(){}

innerHTML = 123;

html(123);

function html(){};

onclick = function(){};

click(function(){});

function click(){};

代码1：弹出div里面的内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7     <script>
　　　　
　　　　/* 弹出div里面的内容*/

　　　　　　　　//原生js代码

 8 //        window.onload = function () {
 9 //            oDiv = document.getElementById(\'div1\');
10 //            oDiv.onclick = function () {
11 //             　　alert(this.innerHTML);
12 //             }
13 //        }
14 
15         $(function () {
16             var  oDiv = $(\'#div1\');//可以简化操作
17             oDiv.click(function () {
18                 alert($(this).html());
19             });
20         });
21     </script>
22 </head>
23 <body>
24     <div id="div1">div</div>
25 </body>
26 
27 </html>

点击后运行效果：

代码2：链式操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7     <script>
　　　　　　//分步操作
 8         /*$(function (){
 9             var oDiv = $(\'#div1\');
10             oDiv.html(\'hello\');
11             oDiv.css(\'background\',\'red\');
12             oDiv.click(function (){
13                     alert(123);
14             });
15         });*/

　　　　　　//链式操作
16         $(function (){
17             $(\'#div1\').html(\'hello\').css(\'background\',\'red\').click(function (){
18                 alert(123);
19                 });
20             });
21     </script>
22 </head>
23 <body>
24     <div id="div1">div</div>
25 </body>
26 
27 </html>

运行效果：

取值赋值：

html();---取值

html(\'...\')---赋值

css(\'width\',\'200px\')---赋值

css(\'width\');---取值

代码3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
		/*window.onload = function (){
			var oDiv = document.getElementById(\'div1\');
			//取值
				//alert(oDiv.innerHTML);
			//赋值
			oDiv.innerHTML = \'hello\';
			alert(oDiv.innerHTML);
		}*/
		$(function (){
			//取值
			//alert($(\'#div1\').html());
			//赋值
			$(\'#div1\').html(\'hello\');
			
		});
    </script>
</head>
<body>
    <div id="div1">div</div>
</body>

</html>

　　运行效果：

代码4：

一组元素的取值与赋值：

　　当是一组元素的时候，取值为元素的第一个，

　　赋值为该组所有元素。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7     <script>
 8         $(function (){
 9             //alert($(\'li\').html());    //当是一组元素的时候，取值为元素的第一个
10             $(\'li\').html(\'world\');    //当一组元素的时候，赋值是一组中的所有元素
11         });
12     </script>
13 </head>
14 <body>
15     <ul>
16         <li>aaaaaaaa</li>
17         <li>bbbbbbbbb</li>
18         <li>cccccccccc</li>
19         <li>dddddddddd</li>
20     </ul>
21 </body>
22 
23 </html>

js与jq在书写上：

可以共存，但不可以混用。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7     <script>
 8         $(function (){
 9             $(\'#div1\').click(function (){
10                 //alert(this.innerHTML);//正确--js写法    
11                 //alert($(this).html());//正确--jq写法
12                 alert($(this).innerHTML);//错误写法
13                 alert(this.html());//错误写法
14             });
15         });
16     </script>
17 </head>
18 <body>
19     <div id="div1">div</div>
20 </body>
21 
22 </html>

至此，本文结束。