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>
至此，本文结束。