jQuery篇

時間 2019-11-08

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

jQuery

1.爲何使用jQuery?

js中window onload事件只能出現一次,若是出現屢次,後面的事件會覆蓋掉前面的事件css
js代碼容錯差html
簡單的動畫效果實現很繁瑣,例如簡單的動畫漸變效果jquery
jQuery的兩大特色編程
- 鏈式編程:好比 .show() 和. html()能夠連寫爲.show().html().數組
- 隱式迭代 : 隱式對應的是顯式,隱式迭代的意思是: 在方法的內部循環遍歷,而不用咱們本身再進行循環,簡化咱們的操做,方便咱們調用app

2.什麼是Jquery

Jquery是js的一個庫,封裝了咱們開發過程當中經常使用的一些功能,方便咱們調用,提升開發效率dom
js庫是把咱們經常使用的複雜功能封裝到簡單的方法中,咱們用的時候,將庫直接引入而後調用方法便可函數
使用步驟動畫
導入包的代碼必定要放在js代碼的最上面this

3.入口函數

原生的js'的入口函數指的是:window.onload = function() {}

jQuery的入口函數,有如下幾個寫法

寫法一: 文檔加載完畢,圖片不加字啊的時候,能夠執行這個函數

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

寫法二: 寫法一的簡潔版

 $(function () {
            alert(1);
        });

寫法三: 文檔加載完畢,圖片也加載完畢的時候,在執行這個函數

 $(window).ready(function () {
            alert(1);
        })

jQuery入口函數與js入口函數的區別
- 書寫個數不一樣:
  - js的入口函數只能出現一次,出現屢次會存在事件覆蓋效果
  - jQuery的入口函數<能夠出現任意屢次,並不存在事件覆蓋效果
- 執行時機不一樣
  - js的入口函數是在全部的文件資源加載完成後,才執行,這些文件資源包括:頁面文檔,外部的js文件,外部的css文件,圖片等
  - jQuery的入口函數,是在文檔加載完成後,再執行,文檔加載完成指的是:DOM樹加載完成後,就能夠操做DOM了,不用等到全部額外部資源都加載完畢

4.jQuery的$符號

jQuery使用$的緣由:書寫簡潔,相對於其餘字符不同凡響,容易被記住,
Jquery佔用了咱們兩個變量: $和JQuery.在代碼中這兩個變量都是同樣的

5.js中的DOM對象和jQuery對象的比較重點

兩者的區別

經過Jquery獲取的元素是一個jq對象數組,其中包含着原生js中的DOM對象,

對於這樣一個div結構

 <div></div>
 <div id="app"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div></div>

js獲取元素節點方式

     var myBox = document.getElementById("app");           //經過 id 獲取單個元素
    var boxArr = document.getElementsByClassName("box"); //經過 class 獲取的是僞數組
    var divArr = document.getElementsByTagName("div");   //經過標籤獲取的是僞數組

jQuery獲取這些元素節點的方式:(獲取的都是數組)

 //獲取的是數組，裏面包含着原生 JS 中的DOM對象。
    　　console.log($('#app'));
    　　console.log($('.box'));
    　　console.log($('div'));

總結:jQuery就是把DOM對象從新包裝一下,讓其具備jQuery方法\

兩者的相互轉換

DOM對象轉換爲jQuery對象
- ```
 $(js對象);
```

jQuery對象轉爲DOM對象

 jquery對象[index];      //方式1（推薦）
 jquery對象.get(index); //方式2

jquery對象轉換成了DOM對象以後,能夠直接調用DOM提供的一些功能,如\

 $('div')[1].style.backgroundColor = 'yellow';
 $('div')[3].style.backgroundColor = 'green';

6.jQuery的選擇器

分爲基本選擇器,層級選擇器,屬性選擇器

基本選擇器

 $("#id")         //id選擇器
 $("tagName")     //標籤選擇器
 $(".className") //class選擇器
 $("*")           //通用選擇器
 
 $("div.c1")     // 交集選擇器 找到有含有c1類的div標籤
 $("#id, .className, tagName") //並集選擇器

層級選擇器

 $("x y");// x的全部後代y（子子孫孫）
 $("x > y");// x的全部兒子y（兒子）
 $("x + y")// 找到全部緊挨在x後面的y
 $("x ~ y")// x以後全部的兄弟y

屬性選擇器

 $('[href]')       //找全部含href屬性的標籤
 $('a[href]')     //找全部含href屬性的a標籤
 $('a[title="luffy"]') //找全部title屬性是luffy的a標籤
 $('a[title="baidu"]') //找全部title屬性不是百度的a標籤
 $('a[href^="https"]') //找全部href屬性以https開頭的a標籤
 $('a[href$="html"]') //找全部href屬性以html結尾的a標籤
 $('a[href*="i"]') //找全部href屬性中含有i的a標籤
 $('a[href][title="luffy"]') //找全部含有href屬性且title屬性=luffy的a標籤

7.jQuery的篩選器

基本篩選器

 :first // 第一個
 :last // 最後一個
 :eq(index)// 索引等於index的那個元素
 :even // 匹配全部索引值爲偶數的元素，從 0 開始計數
 :odd // 匹配全部索引值爲奇數的元素，從 0 開始計數
 :gt(index)// 匹配全部大於給定索引值的元素
 :lt(index)// 匹配全部小於給定索引值的元素
 :not(元素選擇器)// 移除全部知足not條件的標籤
 :has(元素選擇器)// 根據含有某個後代篩選

表單篩選器

 type篩選器
 :text
 :password
 :file
 :radio
 :checkbox
 :submit
 :reset
 :button

其餘屬性篩選器

 :enabled
 :disabled
 :checked
 :selected

8.篩選器方法

 //找兄弟
 $("#id").siblings();// 兄弟們，不包含本身，.siblings('#id')，能夠在添加選擇器進行進一步篩選
 
 //找弟弟
 $("#id").next()
 $("#id").nextAll()
 $("#id").nextUntil("#i2") #直到找到id爲i2的標籤就結束查找，不包含它
 
 //找哥哥
 $("#id").prev()
 $("#id").prevAll()
 $("#id").prevUntil("#i2")

 //找祖輩
 $("#id").parent()
 $("#id").parents() // 查找當前元素的全部的父輩元素（爺爺輩、祖先輩都找到）
 $("#id").parentsUntil('body') // 查找當前元素的全部的父輩元素，直到遇到匹配的那個元素爲止，這裏直到body標籤，不包含body標籤，基本選擇器均可以放到這裏面使用。

 //找兒子
 $("#id").children();// 兒子們

 //過濾
 $("div").first() // 獲取匹配的第一個元素
 $("div").last() // 獲取匹配的最後一個元素
 $("div").eq(n) // 索引值等於指定值的元素，n是索引
 $("div").not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
 $("div").find("p") //後代選擇器，在全部div標籤中找後代的p標籤
 $("div").filter(".c1") // 交集選擇器，從結果集中過濾出有c1樣式類的
 $("div").has() // 保留包含特定後代的元素，去掉那些不含有指定後代的元素。

9.jQuery綁定事件

 爲button按鈕綁定單擊事件，單機按鈕彈出警告框
 $('button').click(
        function () {
            alert('wahaha')
        }
 )

10.jQuery操做標籤

標籤內文本操做

html標籤元素中全部的內容

 爲button按鈕綁定單擊事件，單機按鈕彈出警告框
 $('button').click(
        function () {
            alert('wahaha')
        }
 )

text標籤元素的文本內容

 //獲取值：獲取選中標籤元素中的文本內容
 $('#box').text();
 
 //設置值：設置該全部的文本內容
 $('#box').text('<a href="https://www.baidu.com">百度一下</a>');

文檔標籤操做

插入標籤

append和appendTo

 //追加某元素，在父元素中添加新的子元素。子元素能夠爲：stirng | element（js對象） | jquery元素
 父元素.append(子元素)
 
 //追加到某元素，子元素添加到父元素
 子元素.appendTo(父元素)

 //append
 var oli = document.createElement('li');
 oli.innerHTML = '哈哈哈';
 $('ul').append('<li>1233</li>');
 $('ul').append(oli);
 $('ul').append($('#app'));
 
 //appendTo
 $('<li>天王蓋地虎</li>').appendTo($('ul')).addClass('active')

注意:若是追加的jQuery對本來在文檔樹中,那麼這些元素將從原位置上消失,簡言之就是移動操做

prepend和prependTo

 // 前置添加， 添加到父元素的第一個位置
 父元素.prepend(子元素)；
 
 // 前置添加， 添加到父元素的第一個位置
 子元素.prependTo(父元素)；

after和insertAfter

 // 在匹配的元素以後插入內容 
 兄弟元素.after(要插入的兄弟元素)；
 要插入的兄弟元素.inserAfter(兄弟元素)；
 
 
 $('ul').after('<h4>我是一個h3標題</h4>')
 $('<h5>我是一個h2標題</h5>').insertAfter('ul')

before和onsertBefore

 // 在匹配的元素以前插入內容
 兄弟元素.before(要插入的兄弟元素)；
 要插入的兄弟元素.inserBefore(兄弟元素)；
  
 //示例
 $('ul').before('<h3>我是一個h3標題</h3>')
 $('<h2>我是一個h2標題</h2>').insertBefore('ul')

刪除標籤

 //刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）
 $(selector).remove(); 
 
 // 刪除節點後，事件會保留
 $(selector).detach(); 
 
 // 清空選中元素中的全部後代節點
 $(selector).empty();

修改標籤

 // selector被替換：將全部匹配的元素替換成指定的string、js對象、jquery對象。
 $(selector).replaceWith(content);
 
 // selector被替換：將全部的匹配的元素替換成p標籤。
 $('<p>哈哈哈</p>')replaceAll(selector);
 // replaceWith 
 $('h5').replaceWith('<a href="#">hello world</a>') //將全部的h5標題替換爲a標籤
 $('h5').replaceWith($('#app')); //將全部h5標題標籤替換成id爲app的dom元素
 
 // replaceAll
 $('<br/><hr/><button>按鈕</button>').replaceAll('h4')

克隆標籤

 $('button').click(function() {
 
  // 1.clone()：克隆匹配的DOM元素
  // 2.clone(true)：元素以及其全部的事件處理而且選中這些克隆的副本(簡言之，副本具備與真身同樣的事件處理能力)
  $(this).clone(true).insertAfter(this);
 })

屬性操做

atter()設置屬性值或者獲取值

 //獲取值：attr()設置一個屬性值的時候 只是獲取值
 $('div').attr('id')
 $('div').attr('class')
 
 
 //設置值
 $('div').attr('class','box') //設置一個值
 $('div').attr({name:'hahaha',class:'happy'}) //設置多個值

removeAttr()移除屬性

 //刪除單個屬性
 $('#box').removeAttr('name');
 $('#box').removeAttr('class');
 
 //刪除多個屬性
 $('#box').removeAttr('name class');

prop()

 // 查看屬性
 $(selector).prop(property)
 
 // 設置屬性
 $(selector).prop(property,value)
 
 // 設置多個屬性
 $(selector).prop({property:value, property:value,...})

class類屬性

addClass添加類名

 // 爲每一個匹配的元素添加指定的類名。
 $('div').addClass("box");//追加一個
 $('div').addClass("box box2");//追加多個

removeClass移除類名

 // 從全部匹配的元素中刪除所有或者指定的類。
 $('div').removeClass('box')；//移除box類
 $('div').removeClass();//移除所有的類

toggleClass類的切換

 // 若是存在（不存在）就刪除（添加）一個類。
 $('div').toggleClass('box')
 
 $('span').click(function(){
    //動態的切換class類名爲active
    $(this).toggleClass('active')
 })

val表單控制Value屬性

 // 獲取值：用於表單控件中獲取值，好比input textarea select等等
 $(selector).val()
 
 // 設置值：
 $('input').val('設置了表單控件中的值')；

css樣式

 // css(直接修改css的屬性來修改樣式)
 $("div").css('color'); //獲取
 
 $("p").css("color", "red"); //設置
 $("p").css({"color":"red","background-color":"yello"}); // 設置多個

盒子樣式屬性

內容:寬度(width)和高度(height)
內容+padding:寬度(innerWidth) 高度(innerHeight)

內容+padding+border:寬度(outerWidth) 高度(outerHeight)

 // 外部寬
  .outerWidth() //獲取第一個匹配元素 ：內容+padding+border的寬
  .outerWidth(true) //獲取第一個匹配元素：內容+padding+border+margin的寬
 
  .outerWidth(value) //設置多個，調整的是「內容」的寬
 
 //外部高
  .outerHeight() //第一個匹配元素：獲取內容+padding+border的高
  .outerHeight(true) //第一個匹配元素：獲取內容+padding+border+margin的高
 
  .outerHeight( value ) //設置多個，調整的是「內容」的高

滾動條距離屬性

 // 水平方向
 .scrollLeft()     //獲取
 .scrollLeft( value )//設置
 
 // 垂直方向
 .scrollTop() //獲取
 .scrollTop( value ) //設置

相關標籤/搜索

每日一句

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