jQuery初识之设计思想方法函数示例
作者:Welkin_qing
这篇文章主要为大家介绍了jQuery初识之设计思想及方法函数示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
一、jQuery简介
JQ是JS的一个优秀的库,大型开发必备。在此,我想说的是,JQ里面很多函数使用和JS类似,所以学好JS再学习JQ很容易,其次也不要因为会使用JQ而不学习JS,JQ只是一个辅助工具。
详细学习请访问
二、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设计思想方法函数的资料请关注脚本之家其它相关文章!