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设计思想方法函数的资料请关注软件开发网其它相关文章！
