jQery基礎學習的筆記

時間  2019-12-04
標籤 jqery 基礎 學習 筆記 简体版
原文   原文鏈接

jQery基礎學習的筆記

多庫共存問題

釋放$的做用

var my=.noConflict(); 此時的只是一個變量 my此時表明 $ 擁有控制權javascript

注意：在JQuery中 jQuery與$ 效果同樣css

jQuery中的==$.fn==

$.fn是指jquery的命名空間，加上fn上的方法及屬性，會對jquery實例每個有效。html

注意：經常使用與jQuery組件的開發java

$.fn.method()=function(){}的調用把方法擴展到了對象的prototype上，因此實例化一個jQuery對象的時候，它就具備了這些方法。能夠直接的去調用jquery

jQuery選擇器及應用

jQuery獲取元素的方式

  1. 根據id獲取
    • id選擇器
    • ==用法：==$("#id的值");
    • 獲取的元素的個數：一個
" class="hljs 
  
  
  
  

 
">$("#div")
複製代碼

  1. 根據標籤的名字獲取編程

    • 標籤選擇器
    • ==用法：==$("標籤名字");
    • 獲取的元素的個數：多個
// <div id="btn" class="dv"></div>
$(".di")
複製代碼
  1. 根據類樣式的名字獲取
    • 類選擇器
    • ==用法：==$(".類樣式的名字");
    • 獲取的元素的個數：多個
// <div id="btn" class="dv"></div>
$("div")
複製代碼
  1. 標籤加類選擇器
//<li class="dv">nihao </div>
        $("li.dv")
複製代碼
  1. 層次選擇器
<ul id="uu">
	<li></li>
	<li></li>
	<li></li>
</ul>
複製代碼
//獲取全部的li標籤
$(function () {
     $("#uu>li")
})

複製代碼

6.過濾選擇器瀏覽器

  • even 偶數 選擇器
  • odd 奇數 選擇器
$(".wrap li:odd").css("background","red");   //設置li奇數行的樣式
$(".wrap li:even").css("background","blue");//設置li偶數行的樣式
複製代碼

7.索引選擇器bash

  • ==lt(index)==：設置索引小於index的全部的標籤元素
  • ==eq(index)==：設置索引爲index的標籤元素
  • ==gt(index)==：設置索引大於index的全部的標籤元素
//設置ul中的索引爲4的li的標籤元素
$(".wrap li:eq(4)").css("background","red");
//設置ul中的索引大於4的全部li的標籤元素
$(".wrap li:gt(4)").css("background","blue");
//設置ul中的索引小於4的全部li的標籤元素
$(".wrap li:lt(4)").css("background","green");
複製代碼

jQuery中常見的幾個方法

注意：如下幾個方法，括號裏面什麼都不寫表示獲取，寫內容表示設置markdown

  • ==.html()== 方法：
    • 設置標籤中間顯示其餘標籤及內容，相似於==innerHTML==
  • ==.text()== 方法：
    • 設置標籤中間顯示的文本內容，類型於==innerText==
  • ==.val()== 方法：
    • 設置input標籤中value值，相似於==value==
  • ==.css()== 方法：
    • 設置元素的樣式，相似於==style==
  • ==.attr()== 方法：
    • 獲取屬性值

jQuery 樣式操做

設置樣式

  • .css() 爲標籤添加樣式
    • .css( "屬性" , "屬性值" )
    • .css( "屬性" , "屬性值").css( "屬性" , "屬性值" )
    • .css( {"屬性" : "屬性值" } )

("#dv").css("background","red");("#dv").css("background","red").css("background","red"); $("#dv").css( { "background" : "red" , "width" : "20px"} );app

//獲取寬和高的屬性值---->數字類型 var width=("#dv").width()*2; var height=("#dv").height()*2; //設置元素的寬和高--->參數能夠是數字也能夠是字符串 ("#dv").width(width);("#dv").height(height);

添加樣式

  • .addClass() 爲元素添加類樣式
    • addClass(" 類樣式名字 ")； 添加一個類樣式
    • addClass(" 類樣式名字1 類樣式名字2 ")； 添加多個類樣式
    • 注意：添加多個樣式的時候 中間以空格隔開

("#dv").addClass("cls"); 一個樣式("#dv").addClass("cls_1 cls_2"); 多個樣式

移除樣式

  • removeClass() 移除樣式
    • removeClass( " 類樣式名字 " )； 移除類樣式
    • removeClass( ) 移除當前元素全部的樣式

("body").removeClass("cls");("body").removeClass();

判斷是否應用樣式

  • hasClass() 判斷當前元素是否應用了某個類樣式
    • hasClass( " 類樣式名字 " )

var result=$("#dv").hasClass("cls"); 返回值爲：==true==、==false==

切換元素樣式

  • toggleClass(); 切換元素的類樣式
    • toggleClass( " 類樣式名字 ");
    • 注意：該方法能夠添加和移除類樣式 屢次操做

$("body").toggleClass("cls");//切換類樣式

常見的樣式的操做

  1. 獲取與設置寬高

//獲取寬和高的屬性值---->數字類型 var width=("#dv").width()*2; var height=("#dv").height()*2; //設置元素的寬和高--->參數能夠是數字也能夠是字符串 ("#dv").width(width);("#dv").height(height);

  1. 獲取設置位置

("#dv").offset().left;("#dv").offset().top; $("#dv").offset({"left":200,"top":200});

  1. 獲取滾動條高度

(this).scrollLeft()(this).scrollTop()

鏈式編程

示例：

$(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");

注意：當發生斷鏈的時候可使用 ==.end()== 方法恢復到鍛鍊以前的效果

$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

jQuery中的遍歷

向下遍歷

  1. childen(可選參數）
    • 只能遍歷他的下一級（兒子輩）

(" #dv ").childen()(" #dv ").childen(" li ")

  1. find(必選參數）
    • 能夠找到任意一級參數

$(" #dv ").find(" li ")

向上遍歷

  1. parent(可選參數）
    • 只能遍歷他的上一級（父輩）

$(" #dv ").parent()

  1. parents(）
    • 向上遍歷全部的元素

$(" #dv ").parents()

  1. parentUntil(）
    • 向上在一個區間內遍歷全部的元素

向上遍歷a標籤到div標籤之間的全部元素 $(" a ").parentUntil("div")

同級遍歷

1.next();

  • 獲取的是當前元素的下一個兄弟元素

$(this).next().css("backgroundColor","green");

2.nextAll();

  • 獲取的是當前元素的後面的全部的兄弟元素

$(this).nextAll().css("backgroundColor","green");

3.nextUntil();

  • 同級元素下面元素的一個區間

同級遍歷 li1 標籤到 li2 標籤之間的全部元素 $("# li1 ").nextUntil("# li2")

4.prev();

  • 獲取的是當前元素的前一個兄弟元素

$(this).prev().css("backgroundColor","green");

5.prevAll();

  • 獲取的是當前元素的前面的全部的兄弟元素

$(this).prevAll().css("backgroundColor","green");

6.prevUntil();

  • 同級元素上面面元素的一個區間

同級遍歷 li1 標籤到 li2 標籤之間的全部元素 $("# li1 ").prevUntil("# li2")

7.siblings();

  • 獲取的是當前元素的全部的兄弟元素(本身除外)

$(this).siblings().css("backgroundColor","green");

過濾效果

1.first();

  • 第一個符合條件的元素

得到第一個p標籤元素 $(「div p」).first();

2.last();

  • 最後一個符合條件的元素

得到最後一個p標籤元素 $(「div p」).last();

3.eq(index);

  • 指定第幾個標籤元素
  • 下標從 0開始

得到第四個p標籤元素 $(「div p」).eq(3);

4.filter();

  • 過濾留下特定的

過濾全部不是 cls樣式的標籤元素 $(this).filter(".cls");

5.not();

  • 過濾掉指定的

過濾全部是 cls樣式的標籤元素 $(this).not(".cls");

each()方法的使用

  • each：迭代方法（循環）
    • 參數1：索引
    • 參數2：對象
$("#uu>li").each(function (index,element) {
   //第一個參數是索引,第二個參數是對象
   $(element).css("opacity",(index+1)/10);
});
複製代碼

jQuery中的動畫效果

動態效果

  • 顯示與隱藏
  • 單位：毫秒
  • $("ul").show( 數字 | slow | normal | fast );
  • $("ul").hide( 數字 | slow | normal | fast );
  • $("ul").toggle( 數字 | slow | normal | fast );
    • slow：600ms
    • normal：400ms
    • fast：200ms
$("ul").show(500);			//顯示
$("ul").hide(slow);			//隱藏
$("ul").toggle(normal);		//顯示 / 隱藏 
複製代碼

案例：幾張圖片依次的顯示與隱藏

$(function () {
	$("#btn1").click(function () {
	
		//獲取div,最後一個圖片,隱藏
		$("div>img").last("img").hide(800,function () {
		
			//arguments.callee至關於遞歸
			$(this).prev().hide(800,arguments.callee);
		});
	});
	
	//顯示
	$("#btn2").click(function () {
		$("div>img").first("img").show(800,function () {
		
			//arguments.callee至關於遞歸
			$(this).next().show(800,arguments.callee);
		});
	});
});

複製代碼

滑動效果（向上、向下）

  • 滑入： slideUp( 數字 | slow | normal | fast )
  • 滑出：slideDown( 數字 | slow | normal | fast )
  • 切換劃入滑出：slideToggle( 數字 | slow | normal | fast )
    • slow：600ms
    • normal：400ms
    • fast：200ms

( 「div" ).slideUp(1000)；( 「div" ).slideDown(1000)； $( 「div" ).slideToggle(1000)；

淡入與淡出效果

  • 淡入： fadeIn( 數字 | slow | normal | fast )
  • 淡出：fadeOut( 時間 )
  • 淡入/淡出：fadeTaggle( 時間 )
  • 淡化透明度：fadeTo( 時間，透明度)

("#dv").fadeIn(1000);("#dv").fadeOut(1000); ("#dv").fadeToggle(1000); //一秒鐘 透明度達到0.3("#dv").fadeTo(1000,0.3);

其餘方式

中止動畫

  • .stop()方法用來中止當前動畫
  • 通常會與show()和hide()方法配合使用

("ul").stop().show(500); //顯示("ul")stop().hide(slow); //隱藏

jQuery中animate方法的使用

  • animate(對象，時間，函數）
    • 第一個參數：是鍵值對---對象（數值的屬性能夠改，顏色不能改）
    • 第二個參數：時間---1000毫秒
    • 第三個參數：匿名函數---回調函數
$(function () {
	$("#btn").click(function () {
		$("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
			$("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
		});
	});
複製代碼

jQuery中HTML的操做

建立元素的方式

  • jQuery中建立元素的方式:
    • 1.$("標籤的代碼")
    • 2.對象.html("標籤的代碼");
var aObj=$("<a href='http://www.baidu.com'>百度</a>");
$("#div").html("<p>這是一個p標籤</p>")

複製代碼

添加建立的元素

  1. append(元素） ==最後一個子節點==
    • 把元素添加到被選中元素裏面的結尾（被選中元素裏邊 div裏面）

//把元素添加到div中 $("#dv").append(aObj);//把超連接追加到div中

  1. pripend(元素）==第一個子節點==
    • 把元素添加到被選中元素裏面的前面（被選中元素裏邊 div裏面）

//把元素插入到某個元素的前面 //$("#dv").prepend(aObj);

  1. before(元素） ==添加兄弟==
    • 把元素添加到選中元素的前面（被選中元素外邊 div外邊）

//把元素添加到當前元素的前面(兄弟元素來添加) //$("#dv").before(aObj);

  1. after(元素） ==添加兄弟==
    • 把元素添加到選中元素的後邊（被選中元素外邊 div外邊）

//把元素添加到當前元素的後面(兄弟元素來添加) //$("#dv").after(aObj);

  1. appendTo(）
    • 把一個對象直接加到另一個對象裏面
>var obj = $("<p></p>");
>把 obj對象 主動的加到div中
>obj.appendTo( $( "#div" ) )
複製代碼

元素屬性的操做

  1. .attr()
    • 設置屬性與獲取屬性
      • .attr("屬性") 獲取到屬性裏面的屬性值
      • .attr("屬性「，」屬性值") 爲元素設置屬性值

獲取到a標籤裏面的超連接 ("a").attr( "herf" ); 爲a標籤設置超連接("a").attr( "herf"," www.baidu.com " );

刪除元素

  1. .html()
    • 清空元素中的內容

$("#dv").html("");//清空元素中的內容

  1. empty()

    • 清空元素中的內容

//$("#dv").empty();//清空元素中的內容

  1. remove()

    • 移除元素自身---自殺

//$("#dv").remove();//移除元素自身---自殺

克隆元素

  1. .clone()
    • 克隆元素

克隆span標籤給div2標籤 var spanObj=("#dv>span").clone();//克隆,複製了這個元素("div2").append(spanObj);

設置元素的全選與全不選

  1. .prop()方法

    • 能夠設置元素的全選與全不選
    • 案例：
<input type="button" value="全選" id="btnAll"/>
<input type="button" value="全不選" id="btnNoAll"/>
<div id="dv">
 <input type="checkbox" value="1"/>吃飯
 <input type="checkbox" value="2"/>睡覺
 <input type="checkbox" value="3"/>打豆豆
 <input type="checkbox" value="4"/>打籃球
 <input type="checkbox" value="5"/>打足球
 <input type="checkbox" value="6"/>打鉛球
 <input type="checkbox" value="7"/>打桌球
</div>
</body>
複製代碼
 //兩個按鈕:1按鈕全選,2全不選
 $(function () {
 //獲取第一個按鈕,點擊---全選
 $("#btnAll").click(function () {
 $("#dv :checkbox").prop("checked",true);
 });
 //獲取第二個按鈕,點擊---全不選
 $("#btnNoAll").click(function () {
 $("#dv :checkbox").prop("checked",false);
 });
 });

複製代碼

jQuery中事件的相關操做

綁定事件

  1. .bind()
  • 能夠爲元素同時綁定多個事件
  • 第一個參數是：事件名字,
  • 第二個參數是：事件處理函數-匿名函數

綁定一個事件 .bind( "事件名" , "處理函數" ) 綁定多個事件 .bind( { "事件名": "處理函數" , "事件名": "處理函數" , "事件名": "處理函數" } )

//綁定單個事件
 $("#btn").bind("click",function () {
	alert("我被點了");
});

 //bind()方法能夠爲元素同時綁定多個事件
$("#btn").bind({"click":function(){
	alert("我被點了");
},"mouseover":function(){
	$(this).css("backgroundColor","red");
},"mouseout":function(){
	$(this).css("backgroundColor","");
}});
複製代碼
  1. .delegate()
  • 參數1.要綁定事件的元素---p
  • 參數2.要綁定的事件的名字---click
  • 參數3.綁定事件的處理函數---匿名函數
//給div標籤裏面的p標籤添加事件
$("#dv").delegate("p","click",function () {
	alert("我被點了");
})
複製代碼
  1. on()
  • 兩個參數
    • 1事件的名字
    • 2事件處理函數
  • 三個參數
    • 1,事件的名字
    • 2.要綁定事件的元素--p
    • 3事件處理函數

父級元素.on("事件類型","子級元素",事件處理函數);

$("#btn").on("click",function () {
	//建立p添加到div中
	$("#dv").append($("<p>這是一個p</p>"));
	
	//爲div中的p標籤綁定事件
	$("#dv").on("click","p",function () {
		alert("我被點了");
	});
});
複製代碼

注意： ==在實際的應用中，通常狀況下on比較經常使用，bind與delegate不經常使用==

解綁事件

  1. 綁定與解綁事件

    • bind() unbind()
    • deledae() undelegate()
    • on() off()

  2. 參數

    • （事件名字）要解綁的事件的名字
    • （元素，事件名字）爲那個元素解除那種綁定事件

  3. 示例：

$("#dv").unbind("click");
$("#dv").undelegate("click");
$("#dv").off("click");
複製代碼
  1. 父子元素事件解綁關係
//下面的代碼是把子級元素的點擊事件解綁了,父級元素的點擊事件還存在
$("#dv").off("click","**");
//移除父級元素和子級元素的全部的事件
$("#dv").off();
複製代碼

注意：

父級元素和子級元素都是經過正常的方式綁定事件,若是經過off解綁的>時候,父級元素的事件解綁了,子級元素的事件沒有解綁

可是:若是子級元素是經過父級元素調用delegate的方式綁定的事件,父>級元素使用off方式解綁事件,這個時候父級元素和子級元素的相同的事>件都會被解綁
複製代碼

觸發事件

  1. 直接調用要觸發的元素的方法
  2. 使用： trigget(事件名)
  3. 使用： triggerHandler(事件名)
$(function () {
	$("#btn1").click(function () {
		$(this).css("backgroundColor","red");
	});
	
	//點擊第二個按鈕-觸發第一個按鈕的點擊事件
	$("#btn2").click(function () {
	
		//觸發事件--3三種方式
		$("#btn1").click();
		
		$("#btn1").trigger("click");//觸發事件
		
		$("#btn1").triggerHandler("click");//觸發事件
	});
});
複製代碼

注意：trigger() 與 triggerHandler() 區別

trigger() 會觸發瀏覽器的默認行爲，並執行事件 triggrtHandler() 不會觸發瀏覽器默認行爲，可是會執行事件 例如：獲取到焦點是瀏覽器的默認行爲

$("#txt").trigger("focus");		//文本框獲取到焦點了
$("#txt").triggerHandler("focus");	//文本框沒有獲取到焦點了
複製代碼

事件對象

$("div").on("click",function(event){} )

  • event.delegateTarget：代碼綁定事件的對象
  • event.currentTarget：綁定事件的對象
  • event.target：真正觸發事件的對象

取消冒泡事件與默認事件

取消冒泡事件

  1. event.stoPropagation()
  2. return false

取消默認事件

  1. event.preventDefault()
  2. return false;

例如能夠取消a標籤的默認事件 $("a").preventDefault()

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程