日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

jQuery初識之設(shè)計思想方法函數(shù)示例_jquery

作者：Welkin_qing ? 更新時間： 2022-08-17 編程語言

一、jQuery簡介

JQ是JS的一個優(yōu)秀的庫，大型開發(fā)必備。在此，我想說的是，JQ里面很多函數(shù)使用和JS類似，所以學(xué)好JS再學(xué)習(xí)JQ很容易，其次也不要因為會使用JQ而不學(xué)習(xí)JS，JQ只是一個輔助工具。
詳細(xì)學(xué)習(xí)請訪問

www.jQuery.com

二、JQ的好處

1.簡化JS 的復(fù)雜操作

2.不再需要關(guān)心兼容性

3.提供大量的實用方法

三、設(shè)計思想

1.選擇網(wǎng)頁元素

A.模擬css選擇元素

$('#div1')

對于數(shù)組可省略循環(huán)

B.獨有表達(dá)式選擇

$('div'):eq(2)  //表示該組div中第三個div
$('div'):odd()   //表示該組中為偶數(shù)的div
$('div'):even()  //表示改組中為奇數(shù)的div

C.多種篩選方法

$('li').filter('.box').css('background','red') ;
//選出多組li中css名為.box的那個li,將它的背景顏色設(shè)為紅色
$('li').filter('[title = hello]').css('background','red');
//選出多個li中title為hello的li，并將它的背景顏色設(shè)為紅色

2.JQ寫法

A.方法函數(shù)化

window.onload = function(){};  //js寫法
$(function(){});  //JQ寫法
function $(){}  //假裝有一個$函數(shù)

innerHTML = 123;  //對于innerHTML同樣理解
html(123)
function html(){}

onclick = function(){};  //對于onclick函數(shù)同樣
click(function(){})
function click(){}

下面將一段js代碼，用jq表示出來

window.onload = function(){    //js代碼
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(){
        alert( this.innerHTML );
    };
};

$(function(){    //JQ代碼
    //var oDiv = $('#div1');
    $('#div1').click(function(){   
       //此處若沒有注釋上一句，則可以寫成oDiv.click(function(){
        alert( $(this).html() );
    });
});

注意：傳參為函數(shù)調(diào)用，調(diào)用帶上括號

B.原生關(guān)系和鏈?zhǔn)讲僮?/h4>

在jq中可以純js寫法，也可以純jq寫法，但是不要兩者混著用

$('#div1').click(function(){
        alert( $(this).html() );  //jq的寫法
        alert( this.innerHTML );  //js的寫法
        alert( $(this).innerHTML );  //錯誤的
        alert( this.html() );  //錯誤的
    });

jq中可以將多個事件寫在一個后面 == 鏈?zhǔn)讲僮?/p> 

var oDiv = $('#div1');
    oDiv.html('hello');
    oDiv.css('background','red');
    oDiv.click(function(){
        alert(123);
    });

$('#div1').html('hello').css('background','red').click(function(){
        alert(123);
    });

這兩段代碼是相同的

C.取值賦值合體

js中的取值賦值：

oDiv.innerHTML = 'hello';  //賦值
alert( oDiv.innerHTML );  //取值

jq中的取值賦值：

$('#div1').html('hello');  //賦值
alert( $('#div1').html() ); //取值

注意：

1.當(dāng)一組元素的時候，取值是一組中的第一個

2. 當(dāng)一組元素的時候，賦值是一組中的所有元素

attr()可設(shè)置屬性，可獲取屬性

alert($('div').attr('title'));  //獲取title屬性
//設(shè)置屬性  
$('div').attr('title','456');
$('div').attr('class','box');

原文鏈接：https://www.jianshu.com/p/0ee1fccae583

欄目分類
最近更新