Jquery雜項--選看

時間 2019-11-18

標籤 jquery 雜項欄目 JQuery 简体版

原文原文鏈接

--------------------------------------------------------------------------------------------------javascript

jquery框架php

① jquery是一個 javascript框架/javascript 庫css

爲何出現 javascript框架?html

好比: 爲了獲取 id 對應對象java

document.getElementById('id號');mysql

爲了獲取標籤名獲取對象jquery

document.getElmentsByTagName("tagname");ajax

若是使用框架sql

$('#id') $('.classname')json

若是使用jquery框架發送 ajax請求

Jquery.send(..);

得出結論是: 使用js框架能夠提升咱們開發js的效率

② write less do more

③ jquery是一個輕量級的js庫，給使用者提供一系列的函數

④ 目前流行的js庫有:

jquery 2. extjs 3. prototype 4. dwr(運行服務器) 5. dojo

如何在zend studio 安裝一個插件(apatana) 能夠提示js的函數和屬性,目前這個工具很流行

u 下面我演示如何安裝

① 先下載aptana插件 www.aptana.org

② 安裝的方式有兩種

在線安裝(推薦)

離線安裝 (首先下載插件包)

help->software->find and install->search for new featrue .. ->new archived site->選中你的aptana.zip ->finish->選中aptana zip複選框

若是提示某個jar安裝不成，則去掉這個jar選項

安裝時，大概3分鐘.

快速入門案例

使用jquery開發在網頁打開是，提示一句話: "hello,world"!

//$(document)是一個jquery 對象

//document是dom對象

$(document).ready(function(){

window.alert('hello,world');

}

);

</script>

☞ 在使用jquery開發中，有兩種對象 1. jquery對象 2. dom對象, 若是是jquery對象則只能使用jquery庫提供的方法, 若是是dom對象，則只能使用 js自己提供的方法.

分析一下，爲何可使用jquery方法?

<script type="text/javascript">

function Dog(){

}

Dog.prototype={

ready: function(){

window.alert('ok');

}

var dog1=new Dog();

dog1.ready();

</script>

u 什麼事jquery對象

jquery對象就是對dom對象進行包裝，這樣就可使用jquery的方法, jquery對象和dom對象能夠相互轉換,方法是:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

//說明jquery對象和dom對象區別

function testing(){

//使用傳統的方法來獲取test

//obj1是dom對象

var obj1=document.getElementById("test");

window.alert(obj1.value);

//若是是jquery對象,規定一個jquery對象名是 $開頭

var $obj2=$('#test');

alert($obj2.val());

//他們之間是否可以相互轉換.

//dom->jquery

//var $obj3=$(obj1); // $(document).ready()..

//window.alert($obj3.val());

//jquery->dom對象?

//在jquery開發中，把一個對象當作集合處理

//有兩種方法.1.

var obj4=$obj2[0]; //obj4就是dom

//如今

alert("obj4 valu="+obj4.value);

//第二種方法把jquery->dom

var obj5=$obj2.get(0);

alert("obj5 val="+obj5.value)

}

</script>

</head>

<body>

</body>

</html>

u jquery的選擇器

基本選擇器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value=" 改變元素名爲 <div> 的全部元素的背景色爲 #00FFFF" id="b3"/>

<input type="button" value=" 改變全部的<span>元素和 id 爲 two 的元素的背景色爲 #3399FF" id="b5"/>

div id爲one

</div>

div id爲two

</div>

div id爲three

</div>

span one

</span>

span two

</span>

</body>

//************改變 id 爲 one 的元素的背景色爲 #0000FF***********

/*function abc(){

document.getElementById("one").style.background="#0000FF";

}*/

//jquery的id選擇器去和按鈕綁定一個事件

//$('#b1')表示選中 b1這個控件

//$('#b1').click 給b1這個按鈕綁定 click事件

//function(){

// window.alert('yes');

//} 表示點擊b1按鈕時，究竟作什麼

$('#b1').click(

function(){

$('#one').css("background","#0000FF");

}

);

//*****改變 class 爲 mini 的全部元素的背景色爲 #FF0033

$('#b2').click(

function (){

$('.mini').css("background"," #FF0033");

}

);

//******改變元素名爲 <div> 的全部元素的背景色爲 #00FFFF

$('#b3').click(

function (){

$('div').css("background","#00FFFF");

}

);

//******改變全部元素的背景色爲 #00FF33

$('#b4').click(

function(){

$("*").css("background","#00FF33");

}

);

//*****改變全部的<span>元素和 id 爲 two class .mini 的元素的背景色爲 #3399FF

$('#b5').click(

function(){

//??

$('span,#two,.mini').css("background","#3399FF");

}

)

//***********end*************

</script>

</html>

練習案例:

代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

$('p').click(

function(){

//this表示當前被點擊元素，可是此時咱們當作dom對象

//window.alert(this.innerHTML);

//$(this) 表示當前被點擊元素，可是此時咱們當作jquery對象

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

//window.alert('ok');

}

);

</script>

</body>

</html>

u 層次選擇器的

prev + next 表示選擇 prev 的下一個元素 (強調：同一級)
prev ~ siblings 表示選擇 prev 的後面全部元素(強調：同一級)

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<input type="button" value="改變 <body> 內全部 <div> 的背景色爲 #0000FF" id="b1"/>

<input type="button" value="改變 <body> 內子 <div> 的背景色爲 #FF0033" id="b2"/>

<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF" id="b3"/>

<input type="button" value=" 改變 id 爲 two 的元素後面的全部兄弟<div>的元素的背景色爲 # #0000FF" id="b4"/>

<input type="button" value=" 改變 id 爲 two 的元素全部 <div> 兄弟元素的背景色爲 #0000FF" id="b5"/>

div id爲one

</div>

div id爲two

id twoo1

</div>

id twoo2

</div>

div id爲three

id three01

</div>

span one

</span>

span two

</span>

</body>

//*******改變 <body> 內全部 <div> 的背景色爲 #0000FF

$('#b1').click(function(){

$('div').css("background","#0000FF");

})

//*******改變 <body> 下 <div> 的背景色爲 #0000FF

$('#b2').click(function(){

$('body > div').css("background","#0000FF");

})

//改變 id 爲 one 的下一個 <div> 的背景色爲 #0000FF(選擇一個)

$('#b3').click(function(){

$('#one + div').css("background","#0000FF");

})

//*******改變 id 爲 two 的元素後面的全部兄弟<div>的元素的背景色爲 # #0000FF

$('#b4').click(function(){

$('#two ~ div').css("background","#0000FF");

})

//****改變 id 爲 two 的元素全部 <div> 兄弟元素的背景色爲 #0000FF

$('#b5').click(function(){

$("#two").siblings("div").css("background","#0000FF");

})

</script>

</html>

u 過濾選擇器

① 基礎過濾選擇器

全部的案例以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id爲one

</div>

div id爲two

id twoo1

</div>

id twoo2

</div>

div id爲three class one

id three01

</div>

執行動畫

</div>

span one

</span>

span two

</span>

</body>

//函數

function ca(){

$("#mover").slideToggle("slow",ca);

}

//調用

ca();

//*****改變第一個 div 元素的背景色爲 #0000FF

$('#b1').click(

function(){

//$('div:first').css("background","#0000ff");

$("div:eq(0)").css("background","#0000ff");

}

);

//*****改變最後一個 div 元素的背景色爲 #0000FF

//所謂最後一個指的是是從上到下，從左到右去搜，最後的一個

$('#b2').click(

function(){

$('div:last').css("background","#0000ff");

}

);

//***改變class不爲 one 的全部 div 元素的背景色爲 #0000FF

$('#b3').click(

function(){

//先選擇全部div,而後再過濾(select mysql )

$("div:not(.one)").css("background","#0000ff");

}

);

//********改變索引值爲偶數的 div 元素的背景色爲 #0000FF

$('#b4').click(

function(){

//:表示過濾

$("div:odd").css("background","#0000ff");

}

);

//5

//*****改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF

$('#b6').click(

function(){

$("div:gt(3)").css("background","#0000ff");

}

);

//改變索引值爲等於 3 的 div 元素的背景色爲 #0000FF

$('#b7').click(

function(){

$("div:eq(3)").css("background","#0000ff");

}

);

//**改變索引值爲小於 3 的 div 元素的背景色爲 #0000FF

$('#b8').click(

function(){

$("div:lt(3)").css("background","#0000ff");

}

);

//****改變全部的標題元素的背景色爲 #0000FF

$('#b9').click(

function(){

$(":header").css("background","#0000ff");

}

);

//***改變當前正在執行動畫的全部元素的背景色爲 #0000FFF

$('#b10').click(

function(){

//怎麼樣吧顏色在從新找回的.

$(":animated").css("background","red");

}

);

</script>

</html>

-----

練習

代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<h1>第一個表格</h1>

</table>

<h1>第二個表格</h1>

</table>

$("table:eq(0) tr:even").css("background","red");

$("table:eq(0) tr:odd").css("background","blue");

//第二個表格

$("table:eq(1) tr:even").css("background","green");

$("table:eq(1) tr:odd").css("background","yellow");

</script>

</body>

</html>

代碼

u 內容選擇器

根據內容來選擇你須要的元素

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id爲one

</div>

div id爲two

id twoo1

</div>

id twoo2

</div>

div id爲three class one

id three01

</div>

XXXXXXXXXX

</div>

</div>

執行動畫

</div>

span one

</span>

span two

</span>

</body>

//********改變含有文本 ‘di’ 的 div 元素的背景色爲 #0000FF

$('#b1').click(function(){

$("div:contains('di')").css("background","#0000ff");

})

//**************改變不包含子元素(或者文本元素) 的 div 的背景色爲 #0000FF

$('#b2').click(function(){

$("div:empty").css("background","red");

})

//******改變含有 class 爲 mini 元素的 div 元素的背景色爲 #0000FF

$('#b3').click(function(){

//這個是元素自己

$("div:.mini").css("background","green");

//這個元素它父元素

//$("div:has('.mini')").css("background","green");

})

//****改變含有子元素(或者文本元素)的div元素的背景色爲 #0000FF

$('#b4').click(function(){

//這個是元素自己

$('div:parent').css("background","yellow");

})

//*****改變不含有文本 di; 的 div 元素的背景色

$('#b5').click(function(){

//這個是元素自己

$("div:not(contains('di'))").css("background","red");

})

//****改變索引值爲大於 3 的 div 元素的背景色爲 #0000FF

$('#b6').click(function(){

//這個是元素自己

$("div:gt(3)").css("background","#0000ff");

})

//***

</script>

</html>

u 可見度選擇器

該選擇器，是根據元素的可見性來選擇對象

----------------------------------

u jquery的屬性選擇器

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

div id爲one test

</div>

div id爲one texxx

</div>

div id爲one texxx

</div>

div id爲one xxxesxxxxxt

</div>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

</div>

XXXXXXXXX

</div>

</body>

//*****含有屬性title 的div元素.

$("#b1").click(

function(){

$("div[title]").css("background","green");

}

);

//****屬性title值等於test的div元素

$("#b2").click(

function(){

$("div[title=\"test\"]").css("background","green");

}

);

//屬性title值不等於test的div元素(沒有屬性title的也將被選中)

$("#b3").click(

function(){

$("div[title!='test']").css("background","red");

}

);

//屬性title值以te開始的div元素

$("#b4").click(

function(){

$("div[title^='te']").css("background","red");

}

);

//屬性title值以est結束的div元素

$("#b5").click(

function(){

$("div[title$='est']").css("background","red");

}

);

//屬性title值含有es的div元素

$("#b6").click(

function(){

$("div[title*='es']").css("background","red");

}

);

//選取有屬性id的div元素，而後在結果中選取屬性title值含有「es」的 div 元素

//咱們的過濾方式有兩種 :

//好比選出文本中含有 abc的 div $("div:contains['abc']")

$("#b7").click(

function(){

//選取有屬性id的div元素，而後在結果中選取屬性title值含有「es」的 div 元素

$("div[title*='es'][id]").css("background","red");

}

);

</script>

</html>

u 子元素選擇器

根據該元素是父元素下出現的位置來選中子元素.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

XXXXXXXXX one

</div>

XXXXXXXXX two

</div>

XXXXXXXXX three

</div>

XXXXXXXXX four

</div>

XXXXXXXXX one

</div>

</body>

//****每一個class爲one的div父元素下的第2個子元素

$('#b1').click(

function(){

$("div .one:nth-child(1)").css("background","red");

}

);

//*****每一個class爲one的div父元素下的第一個子元素

$('#b2').click(

function(){

$("div .one:first-child").css("background","red");

// $("div .one:nth-child(1)").css("background","red");

}

);

//*****每一個class爲one的div父元素下的最後一個子元素

$('#b3').click(

function(){

$("div .one:last-child").css("background","red");

}

);

//**若是class爲one的div父元素下的僅僅只有一個子元素，那麼選中這個子元素

$('#b4').click(

function(){

$("div .one:only-child").css("background","red");

}

);

</script>

</html>

u 表單對象選擇器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<form>

</form>

</body>

//選擇全部的button

var buttons=$(':button');

alert(buttons.length);

var buttons=$("input[type='button']");

alert(buttons.length);

</script>

</html>

小結: 咱們在獲取表單元素時候,有兩種方式

$(":表單元素名") [input button file img....] ,這種方式選擇最全.
$("input[type='button']"); 這種方式<input type="button"/>

u 表單對象屬性選擇器

$("select option:selected")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

div.visible{

display:none;

}

</style>

</head>

<body>

<h2>XXXXXXX</h2>

<h3>XXXXXXXXX</h3>

<br>

<br>

<input type="checkbox" value="愛好1"/>愛好1

<input type="checkbox" value="愛好2"/>愛好2

<input type="checkbox" value="愛好3"/>愛好3

<input type="checkbox" value="愛好4"/>愛好4

<br>

</select>

</select>

</body>

//*利用 jQuery 對象的 val() 方法改變表單內 type=text 可用 <input> 元素的值

$("#b1").click(function(){

$("input[type='text']:enabled").val("hello");

})

//**利用 jQuery 對象的 length 屬性獲取多選框選中的個數

$("#b3").click(function(){

// alert($(":checkbox:checked").length);

alert($("input[type='checkbox']:checked").length);

})

//****利用 jQuery 對象的 text() 方法獲取下拉框選中的內容

$("#b4").click(function(){

//alert($("select option:selected").text());

//必須用這個 val()函數把每一個值打印;

var $objs=$("select option:selected");

/* $.each($objs,function(){

alert($(this).val());

});*/

/* $.each($objs,function(i,n){

// alert(n.value);

alert($(n).val());

})*/

/* $objs.each(function(){

window.alert($(this).val());

})*/

$objs.each(function(i,n){

window.alert("ok"+$(n).val());

})

</script>

</html>

☞ 總結一下過濾器使用的方式

$("div:contains('di')"); //內容

$("div[type]")//屬性

$("div .one")// 選中div 中含 class 爲 .one 的div元素

$("div, .one")// 選中div 和 class 爲 .one 的div元素

☞總結jquery對象集合遍歷的四種形式

//必須用這個 val()函數把每一個值打印;

var $objs=$("select option:selected");

/* $.each($objs,function(){

alert($(this).val());

});*/

/* $.each($objs,function(i,n){

// alert(n.value);

alert($(n).val());

})*/

/* $objs.each(function(){

window.alert($(this).val());

})*/

$objs.each(function(i,n){

window.alert("ok"+$(n).val());

})

☞如何使用咱們的選擇器

總結以下:

1.使用什麼樣的選擇器根據需求定

2.若是針對文檔內容，則使用內容選擇器

3.若是是選擇父子（祖先、後代）元素則使用層次選擇器

4. 若是是根據id/class/tagname/使用基本選擇器

5. 若是是選擇表單中的元素，則使用表單選擇器、表單對象屬性選擇器

6. 根據可見性選擇元素，則使用可見性選擇器

7. 若是是選擇某個元素中包含某個屬性（屬性值），則使用屬性選擇器

8. !!!若是考慮對選中的元素，要進行過濾，則使用過濾選擇器，（有三種方法）

$("div:contains('di')"); //內容

$("div[type]")//屬性

$("div .one")// 選中div 中含 class 爲 .one 的div元素

u jquery如何操做dom

jquery的dom操做分爲三種 (js)

① xml dom

② html dom

③ css dom

查找節點，而後去經過attr函數去修改或者設置屬性的值.

--------------------------------------------------------------------------

jquery的dom操做

u 建立對象

使用jquery的 $() 來建立一個dom對象，幷包裝成一個jquery對象返回

快速入門:

若是傳統的dom方法.

//添加劇慶li到上海下(使用dom的傳統方法)

function test1(){

var myli=document.createElement("li");

myli.setAttribute("id","cq");

myli.setAttribute("name","chongqing");

myli.innerHTML="重慶";

document.getElementById("city").appendChild(myli);

}

若是使用的 jquery方法

代碼以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

</ul>

</body>

//*****添加劇慶li到上海下

$("#b1").click(function(){

//jquery方法

//<li id='cq' name=''chongqing>重慶</li>

//有兩種方法

//1.一步到位********

// $myli=$("<li id='cq' name='chongqing'>重慶</li>");

//先使用內部插入

//$('#city').append($myli) :表示在 $('#city')對象內部後面添加一個 $myli對象

// $('#city').append($myli);

//1.end ....一步到位********

//2.逐步添加咱們的dom對象

$myli=$("<li></li>");//<===>$myli=$("<li/>");

$myli.text("重慶"); //=> <li>重慶</li>

$myli.attr("id","cq");//==><li id='cq'>重慶</li>

$myli.attr("name","chongqing");

//把$myli添加到上海

////$('#city').append($myli) :表示在 $('#city')對象內部後面添加一個 $myli對象

//$('#city').append($myli);

//若是使用appendTo這應當這樣使用

//$myli.appendTo($("#city")); :表示把$myli添加到 $("#city")對象的內部後面

$myli.appendTo($("#city"));

})

//***添加成都li到北京前

$("#b2").click(function(){

//jqury方法

$myli=$("<li id='cq' name='chongqing'>成都</li>");

//$('#city').prepend($myli);

$myli.prependTo($('#city'));

})

</script>

</html>

$aaa.append($bbb);

$bbb.appendTo($aaa);

咱們看看外部插入:

核心代碼以下:

$('#b4').click(function(){

//使用外部插入

//一步到位

//$("#bj").after("<li id='cd' name='chengdu '>成都</li>");

$("<li id='cd' name='chengdu '>成都</li>").insertAfter($('#bj'));

})

$('#b5').click(function(){

//使用外部插入

//一步到位

//$("#jl") 對象前面添加 "<li id='cd' name='chengdu '>成都</li>";

var $jl=$("<li id='cd' name='chengdu '>成都</li>");

//$("#jl").before($jl);

$jl.insertBefore($('#jl'));

})

l 使用jquery去查找某個對象，若是這個對象(id/class...)不存在，jquery不報錯, val()

//alert($('#text2').val());

alert(document.getElementById("text2").value);

//dom,這樣處理

/*if(document.getElementById("text2")){

alert(document.getElementById("text2").value);

}else{

window.alert("ok");

}*/

</script>

u 刪除節點

代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

您喜歡的城市:<br>

</ul>

您愛好的遊戲:<br>

</ul>

<p>Hello</p> how are <p>you?</p>

<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>

</body>

//*****刪除全部p

// $("p").remove();

//***全部p清空

$("p").empty();

//****刪除上海這個li

$("#b3").click(function(){

$("#sh").remove();

})

</script>

</html>

u 複製節點

代碼以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

///////////////////////////////////////////////<br>

</body>

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

window.alert($(this).text());

});

//$("p").clone()表示複製一份 $("p"),可是沒有複製事件

//$("p").clone(true)表示複製一份 $("p"),同時複製事件

$("p").clone(true).insertAfter($('button'));

</script>

</html>

u 節點替換

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<p>Hello</p><p>cruel</p><p>World</p>

</body>

//with : 用什麼去替換什麼

// $("p").replaceWith("<input type='button' value='按鈕'><br/>");

// $("<a href='#'>sohu</a>").replaceAll($("p"));

$("p").replaceWith("<a href='#'>sohu</a><br/>");

</script>

</html>

在jquery開發中有這樣幾個函數，能夠獲取值，同時也能夠設置值

val() val(val)
html() html(val)

$("#div1").html("<p>hello</p>")

text() text(val)

$("#div1").text("<p>hello</p>");

4. attr(name) attr(name,val)

$('#div1').attr("title");

$(''#div1).attr("title","abc");

css("css名字"), css("css名字",val)

$("#div1").css("backgorund");

$("#div1").css("backgorund","red");

removeAttr(): 刪除指定元素的指定屬性

$("#a1").removeAttr("href");

$("#a1").attr("href","http://www.baidu.com");

代碼以下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<br>

</body>

$(document).ready(function (){

//當dom對象加載完畢後，給 b1綁定一個focus事件

$("#b1").focus(function(){

//獲取當前值

$curVal=$(this).val();

if($curVal==this.defaultValue){

//應當設置""

$(this).val("");

}else{

$(this).val($curVal);

}

})

//在綁定一個事件 blur

$("#b1").blur(function(){

//獲取當前值

$curVal=$(this).val();

if($curVal==""){

$(this).val(this.defaultValue);

}else{

$(this).val($curVal);

}

})

});

</script>

</html>

***如何獲取子元素和兄弟元素的方法:

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<div >

ccccccc

</div>

XXXXXXXXX one

</div>

XXXXXXXXX two

</div>

XXXXXXXXX three

</div>

XXXXXXXXX four

</div>

<div>

tttttttttt

</div>

<div>

aaaaaaa

</div>

<div>

bbbbbb

</div></body>

//**查找全部子元素（class 爲 one 的div的子元素)

$("#b2").click(function(){

window.alert('aaaa');

/* $(".one").children().each(function(){

alert($(this).text());

})*/

//指定獲取第幾個子孩子

alert($(".one").children().eq(1).text());

})

//***獲取後面的同輩元素（class 爲 one 的div的子元素)

$("#b3").click(function(){

//獲取.one後面全部的兄弟

// $(".one").nextAll().each(function(){

// alert($(this).text());

// })

//獲取.one後面的第2兄弟

alert($(".one").nextAll().eq(1).text());

})

//**獲取前面的同輩元素（class 爲 one 的div的子元素)

$("#b4").click(function(){

//獲取.one前面全部的兄弟

// $(".one").prevAll().each(function(){

// alert($(this).text());

//})

//獲取.one前面的第1兄弟

alert($(".one").prevAll().eq(0).text());

alert($(".one").prev().text());

})

//**獲取全部的同輩元素

$("#b5").click(function(){

$(".one").siblings().each(function(){

alert($(this).text());

})

//***

</script></html>

代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

請選擇您的愛好!

<br><input type="checkbox" id="checkedAll_2"/>全選/全不選

<br/>

<input type="checkbox" name="items" value="足球"/>足球

<input type="checkbox" name="items" value="籃球"/>籃球

<input type="checkbox" name="items" value="游泳"/>游泳

<input type="checkbox" name="items" value="唱歌"/>唱歌

<br/>

</form>

</body>

$("#checkedAll_2").click(

function (){

if(this.checked){

$("input[name='items']").attr("checked","checked");

}else{

//$("input[name='items']").attr("checked","");

$("input[name='items']").removeAttr("checked");

}

);

$('#CheckedAll').click(function(){

$("input[name='items']").attr("checked", "checked");

}

);

$('#CheckedNo').click(function(){

$("input[name='items']").attr("checked", "");

}

);

//反選

$('#CheckedRev').click(function(){

$("input[name='items']").each(function(){

if(this.checked){

$(this).attr("checked","");

}else{

$(this).attr("checked","checked");

}

})

}

);

</script>

</html>

小結: jquery和ajax整合的使用方法

使用jquery的方法

load(url,[data,],[callfunction])

這個load方法把咱們ajax自行寫的代碼包裝,

url表示向哪一個php發送ajax請求.

data數據是能夠選填，可是格式有要求應當按照 json格式來發送, 一旦有這個數據則，load將以post方式提交, 若是沒有數據 ,能夠設置null,則默認以get方式提交

callfunction :形式 function(data,textstatus,xmlHttpRequest);

data :表示從服務器返回數據(string)

textstatus:表示文本狀態succuss, error, notmodify, timeout

xmlHttpRequest,就是XMLHttpRequest對象

返回的數據多是text/xml/json, 這時你須要用不一樣的方法來處理，而後使用jquery來顯示到某個適當位置

說明： load方法須要用jquery 對象來調用.

jquery.load();

get(url,[data,][callfunction]);
post(url,[data,][callfunctino]);

這個post方法能夠不依賴某個jquery對象,它能夠直接調用

$.post();

url也是向某個php發送數據.

data 也是能夠選填的，格式仍然遵照json格式 {"name":"sp"}; $_POST['name'];

該函數返回的值就是xmlHttpRequest 對象

callfunction函數只能有兩個參數. data,textstatus

-------------------------------

最新版的jquery性能最好 jquery性能提高來源：http://www.jb51.net/article/32524.htm 這個瞭解便可

-----

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。