一、初始化

$(document).ready(function(){});$(function(){});$().ready(function(){});

js的window.onload事件是等到所有內(nèi)容，以及我們的外部圖片之類的文件加載完了之后，才回去執(zhí)行
只執(zhí)行一次。
jQuery的入口函數(shù) 是在 html所有標(biāo)簽都加載之后，就回去執(zhí)行。寫幾次執(zhí)行幾次。
js創(chuàng)建對(duì)象：

var obj = {};                 //1var obj1 = new Object();      //2var obj2 = Object.create();   //3

1跟2的區(qū)別：
推薦使用第一個(gè)方式
第二種方式存在效率問題，因?yàn)橐猲ew對(duì)象，會(huì)涉及到原型查找的問題。

二、選擇器

基本選擇器

符號(hào)	說明	用法
$(“#demo”)	選擇id為demo的第一個(gè)元素	$(“#demo”).css(“background”,”red”)
$(“.liItem”)	選擇所有類名（樣式名）為liItem的元素	$(“.liItem”). css(“background”,”red”);
$(“div”)	選擇所有標(biāo)簽名字為div的元素	$(“div”). css(“background”,”red”);
$(“*”)	選擇所有元素	少用或配合其他選擇器來使用 $(“*”). css(“background”,”red”)
$(“.liItem,div”)	選擇多個(gè)指定的元素，這個(gè)地方是選擇出了 .liItem元素和div元素	$(“.liItem,div”). css(“background”,”red”)

層級(jí)選擇器

符號(hào)	說明	用法
空格	選擇所有的后代元素	$(“div span”). css(“background”,”red”);
>	子代選擇器選擇所有的子代元素	$(“div > span”). css(“background”,”red”)
+	緊鄰選擇器	選擇緊挨著的下一個(gè)元素 $(“div + p”). css(“background”,”red”)
~	兄弟選擇器	選擇后面的所有的兄弟元素

基本過濾選擇器

符號(hào)	說明	用法
:eq(index)	index是從0開始的一個(gè)數(shù)字，選擇序號(hào)為index的元素。選擇第一個(gè)匹配的元素。	$(“l(fā)i:eq(1)”). css(“background”,”red”)
:gt(index)	Index 是從0開始的一個(gè)數(shù)字，選擇序號(hào)大于index的元素	$(“l(fā)i:gt(2)”). css(“background”,”red”)
:lt(index)	Index是從0開始的一個(gè)數(shù)字，選擇小于index 的元素	$(“l(fā)i:lt(2)”). css(“background”,”red”)
:odd	選擇所有序號(hào)為奇數(shù)行的元素	$(“l(fā)i:odd”). css(“background”,”red”)
:even	選擇所有序號(hào)為偶數(shù)的元素\	$(“l(fā)i:even”). css(“background”,”red”)
:first	選擇匹配第一個(gè)元素	$(“l(fā)i:first”). css(“background”,”red”)
:last	選擇匹配的最后一個(gè)元素	$(“l(fā)i:last”). css(“background”,”red”)
:contains(text)	選擇所有包含指定文本的元素
:empty()	選擇所有沒有子元素的元素（包括文本）
:has(selector)	選擇元素其中至少包含指定選擇器匹配的一種元素
:hidden	所有隱藏元素
:visible	所有課件元素

屬性選擇器

符號(hào)	說明	用法
$(“a[href]”)	選擇所有包含href屬性的元素	$(“a[href]”). css(“background”,”red”)
$(“a[href=’itcast’]”)	選擇href屬性值為itcast的所有a標(biāo)簽	$(“a[href=’itcast’]”). css(“background”,”red”)
$(“a[href!=’baidu’]”)	選擇所有href屬性不等baidu的所有元素，包括沒有href的元素	$(“a[href!=’baidu’]”). css(“background”,”red”)
$(“a[href^=’web’]”)	選擇所有以web開頭的元素	$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”)	選擇所有以cn結(jié)尾的元素	$(“a[href$=’cn’]”). css(“background”,”red”)
$(“a[href*=’i’]”)	選擇所有包含i這個(gè)字符的元素，可以是中英文	$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”)	選擇所有符合指定屬性規(guī)則的元素，都符合才會(huì)被選中。	$(“a[href][title=’我’]”). css(“background”,”red”)

input的類型選擇器

$(“:radio”) $(“:text”) $(“:button”)
$(this)[hasHighlight ? “removeClass” : “addClass”](“highlight”)

mouseover/mouseout事件，鼠標(biāo)經(jīng)過的時(shí)候會(huì)觸發(fā)多次，每遇到一個(gè)子元素就會(huì)觸發(fā)一次。
mouseenter/mouseleave事件，鼠標(biāo)經(jīng)過的時(shí)候只會(huì)觸發(fā)一次

jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象:

方式一：$(“#btn”)[0]
方式二：$(“#btn”).get(0)
DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象：
var btn = document.getElementById(“btn”);
var jquery_btn = $(btn);
jquery獲取innerHTML $(“#id”).html()

jQuery的庫沖突問題

通過調(diào)用jQuery.noConflict(); 將$控制權(quán)轉(zhuǎn)移給其他庫。

三、DOM

（一）節(jié)點(diǎn)

1.查找節(jié)點(diǎn) 屬性：$p.attr(“title”) 元素：$(“ul li:eq(1)”).text()
2.創(chuàng)建節(jié)點(diǎn) 元素（li）：文本（草莓）：屬性（草莓）：$("ul").append($("<li tittle=’草莓’>草莓</li>"))
3.插入節(jié)點(diǎn)
append() 正常加 appendTo()邏輯反的，往里面加 prepend() prependTo()
after() insertAfter() 前正常，后邏輯反。 before() insertBefore()
4.刪除節(jié)點(diǎn)
（1）remove var $li = $(“ul li:eq(1)”).remove(); 刪除后，得到刪除節(jié)點(diǎn)的引用,還可以操作添加給其他節(jié)點(diǎn)。也可以直接通過append等轉(zhuǎn)移節(jié)點(diǎn)，可以達(dá)到刪除效果。
$(“ul li:eq(1)”).remove(“l(fā)i[title!=草莓]”); 傳入選擇器選擇
（2）$(“ul li:eq(1)”).empty(); 刪除內(nèi)容 li還在
5.復(fù)制節(jié)點(diǎn)
$("ul li:eq(1)").clone().appendTo("ul"); 傳入true，克隆節(jié)點(diǎn)事件。
6.替換節(jié)點(diǎn)
replaceWith() replaceAll() 前正常，后邏輯反。
7.包裹節(jié)點(diǎn)
wrap() 后包裹前每個(gè)符合情況單獨(dú)包裹
wrapAll() 符合元素的所有全部包裹一次
wrapInner() 包裹內(nèi)容

（二）屬性

1.獲?。?code>$(“ul”).attr(“title”) 設(shè)置：$(“ul”).attr(“title”,”your title”) $(“ul”).attr({“title”:”your title”,”color”:”red”});
html() val() text() height() width() css()
2.刪除：$(“ul”).removeAttr(“title”)

（三）樣式

1．獲取：$(“ul”).attr(“class”) 設(shè)置：$(“ul”).attr(“class”,”high”)
2．追加：$(“ul”).addClass(“class”) 追加同一屬性會(huì)覆蓋第一次調(diào)用與attr相同
3．移除：removeClass() 不傳參數(shù)刪除所有class屬性，傳參數(shù)刪除參數(shù)
4．切換：$(“ul”).toggleClass(“class”)
5．$(“ul”).hasClass(“class”) 相當(dāng)于 (“ul”).is(“.another”)

（四）HTML 文本值

1.html() innerHTML 不能用于XML
2.text() innerText XML XHTML都有效 FireFox 不能用innerText 但是可用text()
3.val() 讀寫下拉選擇 $("select").val("22"); $("select").val(["22",”33”]);

（五）遍歷節(jié)點(diǎn)

1.children()
2.next() 后面的同輩節(jié)點(diǎn) prev()
3.siblings() 元素前后所有同輩節(jié)點(diǎn)
4.closest() 找最近的匹配元素，不匹配逐級(jí)向上查找。
5.find() filter() nextAll() prevAll() parent() parents()

（六）CSS DOM

1.$(“l(fā)i”).css(“color”) $(“l(fā)i”).css(“color”,”red”) $(“l(fā)i”).css({“color”:”red”,”tittle”:”title content”}) 直接寫數(shù)字默認(rèn)轉(zhuǎn)像素

$(“l(fā)i”).width()   $(“l(fā)i”).width(“400px”)  $(“l(fā)i”).width(400)  $(“l(fā)i”).width(“400em”)

offset() 獲取元素的offset對(duì)象，該對(duì)象有l(wèi)eft和top元素，左偏移和右偏移。
position() 獲取元素相對(duì)于最近的一個(gè)position樣式屬性為relative absolute的祖父節(jié)點(diǎn)的相對(duì)偏移。
4.scrollTop() scrollLeft() 距頂端距左端的距離傳入值可設(shè)置滾動(dòng)位置

四、事件和動(dòng)畫

1．事件

（一）事件綁定

1.$li.click(function(){})
2.$li.bind(“click”,function(){})

（二）合成事件

1．$li.hover(fn1, fn2) 相當(dāng)于mouseLeave mouseEnter
2．$li.toggle(fn1,fn2) 模擬鼠標(biāo)連續(xù)單擊

（三）事件冒泡

1．event.stopPropagation() event.preventDefault()
簡寫：return false; jquery不支持事件捕獲
2．event.type()
3．event.target()
4．event.relatedTarget()
5．event.pageX() event.pageY() 鼠標(biāo)點(diǎn)擊坐標(biāo)
6．event.which() 獲取鼠標(biāo)左中右鍵 1左,2中,3右
7．event.metaKey() 按鍵
8．originalEvent() 指向原始事件對(duì)象
9．$li.one(“click”,function(){}) 相當(dāng)于bind 只有效一次，之后點(diǎn)擊無作用

（四）移除事件

1．$btn.unbind(“click”); 沒有參數(shù)，刪除所有綁定時(shí)間，函數(shù)作為第二個(gè)參數(shù)，只刪除事件事件處理函數(shù)。只有一個(gè)參數(shù)，傳入一個(gè)類型，只刪除一個(gè)事件綁定。

（五）模擬操作

1．$li.trigger(“click”) $li.click()
2．觸發(fā)自定義事件 $li.bind(“myClick”,function(){}) $li.trigger(“myClick”)
3．傳遞數(shù)據(jù) $li.bind(“myClick”,function(event,message1,message2){}) $li.trigger(“myClick”,[“參數(shù)一”,”參數(shù)二”])
4．執(zhí)行默認(rèn)操作
$(“input”).trigger(“focus”) 不僅會(huì)觸發(fā)focus綁定的事件，也會(huì)使input本身綁定事件
$(“input”).triggerHandler(“focus”) 不觸發(fā)瀏覽器默認(rèn)操作，觸發(fā)focus事件

（六）其他用法

1．綁定多個(gè)事件類型

$li.bind(“mouseover mouseout”,function(){})

2．命名空間

$li1.bind(“click.plugin”,function(){})$li2.bind(“mouseover.plugin”,function(){})$li3.unbind(“.plugin”)   整體解除綁定

3．相同控件不同命名空間的相同事件

$li1.bind(“click”,function(){});$li1.bind(“click.plugin”,function(){});$li2.bind(“click”,function(){$li1.trigger(“click!”);       });

2．jQuery中的動(dòng)畫

1.show () hide() 參數(shù) slow 600ms normal 400ms fast 200ms 傳入數(shù)字默認(rèn)為ms 同時(shí)變高度寬度不透明度
2.fadeIn() fadeOut() 不透明度
3.slideUp() slideDown() slow 600ms normal 400ms fast 200ms
4.自定義動(dòng)畫

$li.animate({left:”500px”},3000);

scrollTop
5.累加、累減動(dòng)畫

$li.animate({left:”+=500px”},3000);

6.多重動(dòng)畫綜合動(dòng)畫

$li.animate({left:”500px”,height:”200px”},3000);  //同時(shí)執(zhí)行多個(gè)動(dòng)畫$li.animate({left:”500px”},3000)

.animate({height:”200px”},3000); //按順序執(zhí)行多個(gè)動(dòng)畫
7.停止動(dòng)畫和判斷是否處于動(dòng)畫狀態(tài)

stop([clearQueue][,gotoEnd])$li.stop(true,true)$li.is(“:animated”)

8.toggle() slideToggle() fadeIn(600,0.2)
9

.$li.animate({opacity:”show”},400) ;   //相當(dāng)于：$li.show(400)  $li.fadeIn(400)$li.animate({height:”show”},400) ;  // 相當(dāng)于：$li.slideDown(400)$li.animate({opacity:”0.6”},400) ;  // 相當(dāng)于：$li.fadeTo(400,0.6)

10.$("#comment").animate({height: "+=50"}, 1000);
11.$comment.is(":animated") 判斷處于動(dòng)畫狀態(tài) 返回布爾值

例子：

$('tbody>tr').click(function(){                $(this).addClass("highlight")                .siblings().removeClass("highlight").end()                .find(':radio').attr("checked",true);            });//$(':radio:checked').parent().parent().addClass("highlight");            //$(':radio:checked').parents('tr').addClass("highlight");            $('tbody>tr:has(":checked")').addClass("highlight");$('th[class="h"]').click(function(){                $(this).parent().siblings('.child_' + $(this).parent()[0].id).toggle();   //點(diǎn)擊自動(dòng)執(zhí)行與取消            });

動(dòng)態(tài)篩選

$("#filterName").keyup(function(){                $("table tbody tr").hide().filter(":contains("+ $(this).val() +")").show();            }).keyup();$('#cssfile').attr("href", "css/" + this.id + ".css");     //jQuery        $('#cssfile')[0].href = ("css/" + this.id + ".css");       //jsvar hasHighlight = $(this).hasClass('highlight');                $(this)[hasHighlight ? "removeClass" : "addClass"]("highlight")                .find(':checkbox').attr("checked", !hasHighlight);$('tbody>tr:has(":checked")').addClass("highlight");var index = $('div.tab_menu>ul>li').index(this);    //傳入js對(duì)象

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版