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>Titletitle>
 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">divdiv>
25 body>
26 
27 html>

点击后运行效果：

代码2：链式操作

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 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">divdiv>
25 body>
26 
27 html>

运行效果：

取值赋值：

html();---取值

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

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

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

代码3：

div

　　运行效果：

代码4：

一组元素的取值与赋值：

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

　　赋值为该组所有元素。

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Titletitle>
 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>aaaaaaaali>
17         <li>bbbbbbbbbli>
18         <li>ccccccccccli>
19         <li>ddddddddddli>
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>Titletitle>
 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">divdiv>
20 body>
21 
22 html>