26、Jquery基礎

2024-04-27 15:00:51

字體：大中小

來源：轉載

供稿：網友

什么是Jquery？

Jquery是一套javascript腳本庫。

使用時需要先下載下來，并引用到項目中。

下載地址：http://jquery.com/download/

目前jquery分為 1.x 和 2.x兩種版本， 2.x以上不再支持i8及以下瀏覽器。

Jquery語法

$(selector).action() 美元符開頭選擇器名.執行的方法

jquery(document).read(function(){}); //等同于load 文檔加載完畢后運行的函數$(function(){}); //簡寫

jquery對象與DOM對象

在DOM操作中，將一個按鈕禁用

document.getElementById("btn").disabled=true;

上面執行了一個Javascript DOM操作，如果這樣使用jquery對象來調用DOM屬性則會報錯。

$("#btn").disabled=true;

解決辦法：

1、可以使用jquery對象的attr方法實現

$("#btn").attr("disabled","true");

2、把Jquery對象轉換成DOM對象

$("#btn")[0].disabled=true; $("#btn").get(0).disabled=true;

使用$("").get(0) 或者$("")[0] 可以將jquery對象轉換為DOM對象，然后再調用DOM的屬性即可。

當然這只是操作一個元素，如果多個元素的話遍歷集合，get(i)即可

$(":text").each(function(i){    //$(this).get(i).disabled=true;    //$(this).attr("disabled","true");});

同時也可以將DOM對象轉換為jquery對象

var v = document.getElementById("btn");var $v = $(v); //使用$(dom);即可轉換$v.attr("disabled","true"); //然后使用jquery對象的attr方法即可

Jquery選擇器

在DOM編程中，我們只能使用有限的函數根據id或者標簽獲得DOM對象。

在Jquery中，使用選擇器可以獲取頁面上任意一個或一組對象。

$("#testId") 選取id為testId的元素等同于document.getElementById("testId");

$符號在Jquery中代表對Jquery對象的引用。

$("#testId") 等同于 jquery("#testId");

選擇器的種類

1、基礎選擇器

$("#divId")  選擇id為divId的元素$("p") 選擇所有p標簽$(".red") 選擇所有樣式為red的元素$("*") 選擇所有元素$("#divId , p , .red") 使用,逗號進行分割，然后拼成一個選擇器，會同時選擇這幾個選擇器。

2、層次選擇器

$("#divId div") 選擇id為divId 下的所有div$("#divId>div") 選擇id為divId 下的直接子節點div$("#divId+div") 選擇id為divId 的下一個同級div標簽$("#divId~div") 選擇id為divId 的所有同級div標簽

3、基本過濾器

$("tr:first") 選擇表格的第一行$("tr:last") 選擇表格的最后一行$("input:not(:checked)") 查找所有未選中的input元素$("tr:even") 查找表格所有的偶數行 從0開始 2 4 6$("tr:odd") 查找表格所有的奇數行 1 3 5$("tr:eq(1)") 查找表格中的第二行 index從0開始$("tr:gt(3)") 查找大于3的行$("tr:lt(3)") 查找小于3的行$(":header") 選擇h1~h6的header標簽$(":animated") 選擇所有動畫元素

4、內容過濾器

$("div:contains('david')") 選擇所有包含“david”的div元素$("td:empty") 查找所有不為空的元素$("div:has(p)") 查找所有包含p元素的div$("td:parent") 查找含有子元素的td元素

5、可見性過濾器

$("tr:hidden") 查找所有不可見元素$("tr:visible") 查找所有可見元素

6、屬性過濾器

$("input[type]") 匹配所有包含type屬性的input元素$("input[name='sex']") 匹配所有name為sex的input元素$("input[name!='sex']") 匹配所有name不等于sex的input元素$("input[name^='ch']") 匹配所有name以ch開始的input元素$("input[name$='t']") 匹配所有name以t結尾的input元素$("input[name*='bai']") 匹配所有name包含‘bai’的input元素$("input[name='sex'][type='checkbox']")  復合屬性選擇，匹配name為sex并且type為checkbox的input元素

7、子元素過濾器

$("ul li:nth-child(2)") 匹配ul的第2個子元素 從1開始 eq是0開始$("ul li:first-child") 匹配第一個子元素$("ul li:last-child") 匹配最后一個子元素$("ul li:only-child") 查找ul中是唯一子元素的li

8、表單選擇器

$(":input") 匹配所有input元素 包含select 、button、textarea、input。$(":text") 匹配所有文本框$(":passWord") 匹配所有密碼框$(":radio") 匹配所有單選按鈕$(":checkbox") 匹配所有復選框$(":submit") 匹配所有提交按鈕$(":image") 匹配所有圖像$(":reset") 匹配所有重置按鈕$(":button") 匹配所有按鈕$(":file") 匹配所有文件域

9、表單過濾器

$("input:enabled") 所有可用的input元素$("input:disabled") 所有不可用的input元素$("input:checked") 所有選中的元素$("select option:selected") 選中的下拉元素

操作元素

創建元素

在javascript中創建元素需要使用createElement，并且編寫大量的js代碼。

在jquery中創建元素使用 $(html代碼) 來創建元素。

$("<a href="#">測試</a>") 這樣就創建完畢了，然后指定需要添加到頁面的位置即可。

$("<a href='#'>測試</a>").appendTo("body"); //添加到body的末尾中

對應有一個append方法 $(位置).append(代碼);

$("body").append("<span>abc</span>")

如果想創建到起始位置使用PRepend()方法

$("body").prepend("<h1>h1</h1>") //追加body中的 最前面

$("<h2>h2</h2>").prependTo("h1"); //對應的prependTo()方法

插入元素

剛剛的操作都是添加到具體的標簽中，可以添加到標簽的前面和后面，在jquery中可以使用insertBefore()和insertAfter()插入到某個節點之前或之后。

//insertBefore$("<h3>h3</h3>").insertBefore("#deng"); //插入到#deng上面//insertAfter$("<h4>h4</h4>").insertAfter("#deng"); //#deng下面

也可以使用簡寫before()和after()，但更推薦上面的

//before$("#deng").before("<p>new</p>")//after 之后$("#deng").after("<p>new</p>")

刪除元素

Jquery中刪除元素有兩種方法：empty()刪除所有子節點、remove(selector) 篩選刪除

//empty()$("body").empty(); //清空body下的所有子節點//remove();$("p").remove(); //把P都干掉$("a[href='#']").remove(); //a href為#的全部刪除

獲取/修改屬性

$("btn").attr("type"); //獲取type屬性的值$("btn").attr("type","button"); //設置type屬性的值

操作樣式

操作樣式名：hasClass（是否存在）、removeClass（移除）、addClass（添加）、toggleClass（切換）

if($("#id").hasClass("red")){ //hasClass 是否存在某樣式名    $("#id").removeClass("red");  //removeClass 刪除指定樣式名}else{    $("#id").addClass("red"); //addClass 添加指定樣式名}

然后上面的這一系列判斷 toggleClass自己可以完成

$("#btn").click(function(){    $("#id").toggleClass("red"); //點一下添加 再點一下移除});

除了可以設置類名外還可以使用CSS()方法直接寫入樣式

//.css(樣式名,值) $("div").css("height","100px").css("width","200px").css("border","1px solid #ccc");//.css({對象})$("div").css({    height:"200px",    width:"200px",    border:"2px solid #ccc"});

獲得內容

text()、html()、val()

$("p").text(); //獲得或設置元素文本內容$("p").html(); //獲取或設置元素的內容包含html標記$("input").val(); //設置或獲取表單字段的值

操作尺寸

$("div").width(); //獲得或設置寬度$("div").height(); //獲得或設置高度$("div").innerWidth(); //返回寬度 包含內邊距$("div").innerHeight(); //返回高度 包含內邊距$("div").outerWidth(); //返回寬度 包含內邊距及邊框$("div").outerHeight(); //返回高度 包含內邊距及邊框

Jquery遍歷

map循環

用于遍歷一個數組，并且根據需要返回一個新數組。

語法：$.map(array,function(value,index){return value});

var arr=["a","b","c","d","e"];var newArr = $.map(arr,function(value,index){    //console.log(index+","+value); //索引 值    return value + "," + index;});console.log(newArr.length); //5  得到一個新數組

例：將一個數組中大于3的數翻三倍

var arr=[12,2,3,5,4];var newArr = $.map(arr,function(value,index){    if(value>3)    {        return value * 3;    }});for(var item = 0;item < newArr.length;item++){    console.log(newArr[item]);}

each循環

遍歷對象或數組，不返回內容。

語法：each(function(i){ return false;//結束遍歷});

console.clear();var o = {name:"daviad",age:18,sex:"男"};$.each(o,function(index,value){    console.log(index + "," + value);    return false; //使用return false 停止循環});//name,daviad//age,18//sex,男

each()方法

console.clear();$("a").each(function(i){ //遍歷所有a標簽 打印所有href屬性    console.log($(this).attr("href"));});

對應選擇器的一些方法

$("td").parent(); //返回直接父元素$("td").parents(); //返回所有父元素及祖父元素$("td").parentsUnitl("tr"); //返回td到tr的元素$("ul").children(); //ul下的子節點$("div").find("p") //查找div下的所有p$("div").siblings() //除了自己所有同級元素$("div").next() //查找div同級下一個div 同胞元素$("div").nextAll() //查找div后的所有div$("div").prev() //div同級上一個div 同胞元素$("div").prevAll() //div同級上所有$("ul li").first() //第一個$("ul li").last() //最后一個$("ul li").eq(1) //第二個 從0開始$("p").filter(".cc") //p中沒有cc類名的 全部過濾掉$("p").not(".cc") //p中不帶cc類名的元素