jquery（2） fly

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>

至此，本文结束。