jQuery设计思想方法函数

时间:2022-06-28 Welkin_qing 人气:0

一、jQuery简介

JQ是JS的一个优秀的库，大型开发必备。在此，我想说的是，JQ里面很多函数使用和JS类似，所以学好JS再学习JQ很容易，其次也不要因为会使用JQ而不学习JS，JQ只是一个辅助工具。
详细学习请访问

www.jQuery.com

二、JQ的好处

1.简化JS 的复杂操作

2.不再需要关心兼容性

3.提供大量的实用方法

三、设计思想

1.选择网页元素

A.模拟css选择元素

$('#div1')

对于数组可省略循环

B.独有表达式选择

$('div'):eq(2)  //表示该组div中第三个div
$('div'):odd()   //表示该组中为偶数的div
$('div'):even()  //表示改组中为奇数的div

C.多种筛选方法

$('li').filter('.box').css('background','red') ;
//选出多组li中css名为.box的那个li,将它的背景颜色设为红色
$('li').filter('[title = hello]').css('background','red');
//选出多个li中title为hello的li，并将它的背景颜色设为红色

2.JQ写法

A.方法函数化

window.onload = function(){};  //js写法
$(function(){});  //JQ写法
function $(){}  //假装有一个$函数

innerHTML = 123;  //对于innerHTML同样理解
html(123)
function html(){}

onclick = function(){};  //对于onclick函数同样
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() );
    });
});

注意：传参为函数调用，调用带上括号

B.原生关系和链式操作

在jq中可以纯js写法，也可以纯jq写法，但是不要两者混着用

$('#div1').click(function(){
        alert( $(this).html() );  //jq的写法
        alert( this.innerHTML );  //js的写法
        alert( $(this).innerHTML );  //错误的
        alert( this.html() );  //错误的
    });

jq中可以将多个事件写在一个后面 == 链式操作

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.当一组元素的时候，取值是一组中的第一个

2. 当一组元素的时候，赋值是一组中的所有元素

attr()可设置属性，可获取属性

alert($('div').attr('title'));  //获取title属性
//设置属性  
$('div').attr('title','456');
$('div').attr('class','box');

加载全部内容