jQuery初识之设计思想方法函数示例

jQuery初识之设计思想方法函数示例

目录

一、jQuery简介

二、JQ的好处

三、设计思想

1.选择网页元素

A.模拟css选择元素

B.独有表达式选择

C.多种筛选方法

2.JQ写法

A.方法函数化

B.原生关系和链式操作

C.取值赋值合体

一、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');

以上就是jQuery初识之设计思想方法函数示例的详细内容,更多关于jQuery设计思想方法函数的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读