JQuery學(xué)習(xí)總結(jié)【一】
JQuery學(xué)習(xí)總結(jié)【一】
一：JQuery
1 JQuery知識
*：就是讓我們學(xué)會調(diào)用JQ插件，其實(shí)內(nèi)部就是對JS的封裝。
*：jquery里面有三個文件，
第2個和第3個其實(shí)里面的內(nèi)容是一樣的，只是第三個對其進(jìn)行了壓縮，使瀏覽器對其的訪問時間變短。
我們在使用的時候?qū)query-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起，其實(shí)vsdoc.js是對于前面的解釋說明，它是讓我們在編寫代碼的時候可以點(diǎn)操作出來。
*:練習(xí)《點(diǎn)擊按鈕彈出對話框的內(nèi)容》 《點(diǎn)擊網(wǎng)頁里面的文字使文字一行一行消失》(“$”這個其實(shí)是個函數(shù))
<head>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function () { alert($("#un").val()); });//點(diǎn)擊彈出內(nèi)容
$("div").click(function() { $(this).hide("slow"); });//文字消失
});
</script>
</head>
<body>
<input type="text"id="un"/>
<input type="button" id="btn"/>
<div>文字內(nèi)容</div>
</body>
2 JQuery里面的Ready 《在網(wǎng)頁剛開始就彈出內(nèi)容》
$(dounction).ready(function(){alert(“加載完畢”);})
其實(shí)還可以這樣子寫
$(function(){alert(“加載完畢”);});
<解析：”$”這個函數(shù)將匿名函數(shù)function()注冊為Ready執(zhí)行。>
3 jquery內(nèi)置函數(shù)
.map(array,fn)對數(shù)組中array中的每一個元素調(diào)用fn函數(shù)進(jìn)行處理，fn函數(shù)將處理返回，最后得到一個新的數(shù)組。.map(array,fn)對數(shù)組中array中的每一個元素調(diào)用fn函數(shù)進(jìn)行處理，fn函數(shù)將處理返回，最后得到一個新的數(shù)組。map不能處理Dictionary風(fēng)格的數(shù)組。要用下面的$.each來處理。
$.each(array.fn)對數(shù)組arr每個元素調(diào)用fn函數(shù)進(jìn)行處理，沒有返回值。
var arr=[3,5,7];
Var arr2=$map.(arr,function(item){return item*2}) 函數(shù)式編程。
Var arr={“tom”;”檀木”,”xiaozhang”;”小張”}
$.each(arr,function(key,value){alert(key+”=”+value);});
4 JQuery對象，Dom對象
<dom就是瀏覽器的一些標(biāo)記，比如層，按鈕，標(biāo)簽等，數(shù)組是jq的對象。>
Jquery對象就是通過jquery包裝Dom對象后產(chǎn)生。而且jquery對象只能調(diào)用jquery對象封裝的方法。不能調(diào)用Dom對象的方法。
$(function(){$(“#id”).css(“background”,”red”)});
上面的代碼是復(fù)制，就是將背景色設(shè)置為紅色，若.css中的屬性為一個則為得到值，2個即為設(shè)置值。
5 jquery選擇器
*id選擇器
$(“#div”).html();
*TabName選擇器<標(biāo)簽選擇器>
$(“div”).click(function（）｛alert(“你好我是p”);｝);
這里就是將網(wǎng)頁中所有的div標(biāo)簽都選擇了，都向其添加了click事件。
* css選擇器
同時選擇多個樣式，就是給制定樣式的添加。
$(“div”).click(function(){alert(“這是信息”)});
6 多條件選擇器/層次選擇器
7 jquery的迭代
就是里面的錯誤程序不會給提示出錯，我們自己要添加if/elae語句進(jìn)行判斷。
8 jquery的節(jié)點(diǎn)遍歷
就是運(yùn)用next（）,nextall()方法來進(jìn)行遍歷的。就好像在數(shù)組那里的遍歷是一樣的。 這里只是得到它的下一個元素的值。
Siblings()：獲取所有元素的同輩元素(兄弟節(jié)點(diǎn))。
*:jquery的鏈?zhǔn)骄幊?/p>
$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
});
就是很容易的通過點(diǎn)操作符來操作。
//這里是鏈?zhǔn)讲僮?減少了使用if/else等操作。改變了編程風(fēng)格。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<script src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
$("#tables td").html("<img src='images/1.jpg'/>")
.mouseover(function () {
$("#tables td") .html("<img src='images/1.jpg'/>");
$(this).nextAll().html("<img src='images/2.jpg'/");
});
});
</script>
</head>
<body>
<table id="tables">
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>
9 ：基本的過濾器
這里可以將其寫在一起，比如選擇器和過濾器，這樣子就會很強(qiáng)大。
不僅可以使用選擇器進(jìn)行絕對定位，還可以進(jìn)行相對定位，只要在$()指定第二個參數(shù)，第二個參數(shù)為相對的元素。
案例：
（相對定位）
：這里的元素就是在定位#tables tr 下的td的定位
10 屬性過濾器
Eg：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
$("input[value=顯示選中的內(nèi)容]").click(function() {
alert($("input:checked").val());
});
});
</script>
</head>
<body>
<input type="checkbox" value="上海"/>上海<br/>
<input type="checkbox" value="寶雞"/>寶雞<br/>
<input type="checkbox" value="深圳"/>深圳<br/>
<input type="checkbox" value="西安"/>西安<br/>
<input type="checkbox" value="北京"/>北京<br/>
<input type="submit" value="顯示選中的內(nèi)容"/>
</body>
</html>
11 元素的each <通過一些過濾器和選擇器來遍歷each一些元素。>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery-1.4.2-vsdoc.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
$("input[name=names]").click(function() {
var arr = new Array();
$("input[name=names]:checked").each(function (key, value) {
arr[key] = $(value).val();
});
$("#msgNames").text("共選中"+arr.length+"項(xiàng):"+arr.join(","));
});
});
</script>
</head>
<body>
<input type="checkbox" name="names" value="張輝"/>張輝
<input type="checkbox" name="names" value="媽媽"/>媽媽
<input type="checkbox" name="names" value="媽媽"/>媽媽
<input type="checkbox" name="names" value="媽媽"/>媽媽
<p id="msgNames"></p>
</body>
以上就是本文的全部內(nèi)容，希望對大家有所幫助，下篇文章繼續(xù)介紹JQuery基本知識--JQuery學(xué)習(xí)總結(jié)【二】，有興趣的朋友可以看下。謝謝對腳本之家的支持！
- 實(shí)例解析jQuery工具函數(shù)
- jquery結(jié)合html實(shí)現(xiàn)中英文頁面切換
- jQuery獲取this當(dāng)前對象子元素對象的方法
- jQuery Checkbox 全選 反選的簡單實(shí)例
- jQuery select自動選中功能實(shí)現(xiàn)方法分析
- jQuery實(shí)現(xiàn)發(fā)送驗(yàn)證碼并60秒倒計時功能
- Javascript基于jQuery UI實(shí)現(xiàn)選中區(qū)域拖拽效果
- jquery實(shí)現(xiàn)點(diǎn)擊頁面回到頂部
- 詳解jQuery的Cookie插件
- 解析jQueryEasyUI的使用
- JQuery學(xué)習(xí)總結(jié)【二】
相關(guān)文章
js實(shí)現(xiàn)圖片放大縮小功能后進(jìn)行復(fù)雜排序的方法
這是一個基于jquery的圖片效果，它的作用是：當(dāng)圖片點(diǎn)擊變大(變小)時，其它圖片按照一定的規(guī)則進(jìn)行排序運(yùn)動2012-11-11
jQuery JSON實(shí)現(xiàn)無刷新三級聯(lián)動實(shí)例探討
無刷新三級聯(lián)動的實(shí)現(xiàn)方法有很多，今天將與大家討論下jQuery JSON如何實(shí)現(xiàn)，感興趣的朋友們可以參考下哈2013-05-05
基于jQuery選擇器之表單對象屬性篩選選擇器的實(shí)例
下面小編就為大家?guī)硪黄猨Query選擇器之表單對象屬性篩選選擇器實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了JQuery調(diào)用綁定click事件的3種寫法,本文簡潔清晰的給出3種寫法的代碼示例,可以很方便的復(fù)制使用,需要的朋友可以參考下2015-03-03
在js中常常會用到某類似id的模糊查詢，可以使用jquery工具和模糊查詢"^",來實(shí)現(xiàn)。下面用另個例子說明2013-03-03
jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對鼠標(biāo)事件的相應(yīng)及頁面元素屬性動態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11
jQuery Selectors(選擇器)的使用(七、子元素篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！2009-12-12
一個簡單的實(shí)現(xiàn)下拉框多選的插件可移植性比較好
一個簡單的實(shí)現(xiàn)下拉框多選的插件，可移植性也比較好,需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)彈出窗口中切換登錄與注冊表單
本文給大家推薦的是一款jQuery實(shí)現(xiàn)彈出窗口中切換登錄與注冊表單的特效。適用瀏覽器：IE8+、FireFox、Chrome、Safari、Opera。十分的方便實(shí)用，有需要的小伙伴可以參考下。2015-06-06
cnblogs中在閃存中屏蔽某人的實(shí)現(xiàn)代碼
cnblogs園子還沒提供這項(xiàng)功能，我們又確實(shí)有這個需求，只好自己寫一個,需要的朋友可以參考下。2010-11-11