jqurey常用方法(jqurey设计思想)
jqurey过滤器:
$('div').has('p');//选择包含p元素的div元素
$('div').not('.myClass');//选择class不等于myClass的div元素
$('div').filter('.myClass');//选择class等于myClass的div元素
$().first() //被选中元素的首个元素
$().last()被选元素的最后一个元素
链式操作(用在DOM操作):
$().eq()索引从0开始 被选元素中带有指定索引号的元素 如: $('p').eq(2)//选择第三个p元素
.eq()方法可以提供索引方法(切换) 如:$('#div').find('div').eq($(this).index())
$('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代 或: $('div').find('h3')//选择其中的h3元素
$('div').html('hellow');//将它的内容改变为hellow
.filter()筛选指定表达式的元素 如:$('p').filter(':odd').css('background','blue');//下标为基数 有 :o
.first()选择第一个元素 如: $('p').first().css('background','blue');
.last()选择最后一个元素 如: $('p').last().css('background','blue');
.is()检测是否元素返回布尔值 如: $('p').click(function () {if($(this).is('.first')){$(this).css('background','red');}});//第一为true所以添加颜色值
.has()保留包含特定后代的元素,去掉那些不含有指定后代的元素 DOM操作用的多 如: $('div').has('p');//选择包含p元素的div元素
.not()从匹配的元素集合中移除指定的元素(除什么之外) 如: $('p').not('.first').css('background','blue');
.slice()根据指定的下标范围,选取匹配的元素集合 如:$('p').slice(0,5).css('background','blue'); 下标从0开始 选择0到5添加颜色值
.end() //选项卡用的多 使得结果集可以后退一步 如:$('div').find('h3').eq(2).css('color','red').end().eq(4).css('color','blue');
相邻元素查找:
$('div').next('p'); //选择div元素后面的第一个元素p元素
$('div').parent(); //选择div元素的父元素
$('div').childrem(); //选择div的所有子元素
hellow ');
jqurey创建class名 div1.addclass("contentDiv");
取值与赋值:
$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('hellow');//html()有参数hellow，表示对h1进行赋值
val()//表单字段的值
text()//所选元素的文本内容
attr()//用于获取属性值/设置、改变属性值 改值提供回调函数 有两个参数:1.当前元素下标 2.原始值(旧的值)
width()//设置属性宽度 不包括内外边框边距
height()//设置属性高度 不包括内外边框边距
outerWidth()//包括内外边框边距
outerHeight()//包括内外边框边距
取值是一组中第一个元素,赋值是所有的元素 一个值为获取.() 两个值是设置 .('helow')
元素移形换位:
.直接移动该元素
$('div').insertAfter($('p')); //把div元素移动p元素后面
$('div').appendTo($('p'));
添加元素:
$('div').after($('div')); //把p元素加到div元素前面
.append()//元素的结尾插入内容
.prepend() //元素开头插入内容
.before()//元素之前插入内容
.replacewith()//元素替换为内容
剪切:
$('div').appendTo($('p'));//div元素在p元素后面
赋值节点(克隆的意思):
$('div').clone().appendTo($('p'));//.clone()在元素之前赋值 或者选择性赋值
工具方法:
.each()方法jQ对象下面使用 $.方法:工具方法; 原生的js也可以用 操作数组可以用工具方法
.$trm($('div'),attr('class')) //方法可以把前后空格去掉
独立事件:
click() mouseover()等等
通用事件:
bind()绑定多个事件(可以是函数内的多个参数绑定事件) one()操作一次 unbind() e:event()对象 pageX(获取坐标)等
.toggle(function(){},function(){})//可以绑定多个函数 可以做切换效果
运动特征:
常见效果 1、 .fadeIn() //淡入 .fadeOut() //淡出 .slideDown() //向下展开 .slideUp() //向上卷起
复杂效果 .animate()动画 stop()阻止//滑入运动事件前添加该属性不会出现bug
拖拽插件网: http://jquerui.com/demos/draggable/
版本号组件库: 1.8.22/jqurey-ui.min.js 用绝对定位写
比较好的插件库(国外):
http://workshop.rs/projects/coin-slider/
插件写法:
1.在写jqurey插件时要写成闭包的形式(布局函数)
2.以开头(function($))( 代码 )(JQurey);结尾
$.fn : 扩展插件方法
实例:
(function($){
$.fn.miaovTab = funtion(){ //$.fn.maiovTab这里的.maiovTab是插件的url地址
// This 对应的外部的
$('div').has('p');//选择包含p元素的div元素
$('div').not('.myClass');//选择class不等于myClass的div元素
$('div').filter('.myClass');//选择class等于myClass的div元素
$().first() //被选中元素的首个元素
$().last()被选元素的最后一个元素
链式操作(用在DOM操作):
$().eq()索引从0开始 被选元素中带有指定索引号的元素 如: $('p').eq(2)//选择第三个p元素
.eq()方法可以提供索引方法(切换) 如:$('#div').find('div').eq($(this).index())
$('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代 或: $('div').find('h3')//选择其中的h3元素
$('div').html('hellow');//将它的内容改变为hellow
.filter()筛选指定表达式的元素 如:$('p').filter(':odd').css('background','blue');//下标为基数 有 :o
.first()选择第一个元素 如: $('p').first().css('background','blue');
.last()选择最后一个元素 如: $('p').last().css('background','blue');
.is()检测是否元素返回布尔值 如: $('p').click(function () {if($(this).is('.first')){$(this).css('background','red');}});//第一为true所以添加颜色值
.has()保留包含特定后代的元素,去掉那些不含有指定后代的元素 DOM操作用的多 如: $('div').has('p');//选择包含p元素的div元素
.not()从匹配的元素集合中移除指定的元素(除什么之外) 如: $('p').not('.first').css('background','blue');
.slice()根据指定的下标范围,选取匹配的元素集合 如:$('p').slice(0,5).css('background','blue'); 下标从0开始 选择0到5添加颜色值
.end() //选项卡用的多 使得结果集可以后退一步 如:$('div').find('h3').eq(2).css('color','red').end().eq(4).css('color','blue');
相邻元素查找:
$('div').next('p'); //选择div元素后面的第一个元素p元素
$('div').parent(); //选择div元素的父元素
$('div').childrem(); //选择div的所有子元素
常用的遍历查找:
.find() 如: $('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代 或: $('div').find('h3')//选择其中的h3元素
jqurey创建class名 div1.addclass("contentDiv");
取值与赋值:
$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('hellow');//html()有参数hellow，表示对h1进行赋值
val()//表单字段的值
text()//所选元素的文本内容
attr()//用于获取属性值/设置、改变属性值 改值提供回调函数 有两个参数:1.当前元素下标 2.原始值(旧的值)
width()//设置属性宽度 不包括内外边框边距
height()//设置属性高度 不包括内外边框边距
outerWidth()//包括内外边框边距
outerHeight()//包括内外边框边距
取值是一组中第一个元素,赋值是所有的元素 一个值为获取.() 两个值是设置 .('helow')
元素移形换位:
.直接移动该元素
$('div').insertAfter($('p')); //把div元素移动p元素后面
$('div').appendTo($('p'));
添加元素:
$('div').after($('div')); //把p元素加到div元素前面
.append()//元素的结尾插入内容
.prepend() //元素开头插入内容
.before()//元素之前插入内容
.replacewith()//元素替换为内容
jqurey选择器的优化:
1.优化使用id选择器 id选择器在DOM操作中是最快的
2.在class选择器前添加标签名
3.采用find()，而使用上下文查找 如:$('.itm').find('li').css('color','red');
4.强大的链式操作比缓存更快
5.从左至右的模式1.3+版本更新
剪切:
$('div').appendTo($('p'));//div元素在p元素后面
赋值节点(克隆的意思):
$('div').clone().appendTo($('p'));//.clone()在元素之前赋值 或者选择性赋值
工具方法:
.each()方法jQ对象下面使用 $.方法:工具方法; 原生的js也可以用 操作数组可以用工具方法
.$trm($('div'),attr('class')) //方法可以把前后空格去掉
独立事件:
click() mouseover()等等
通用事件:
bind()绑定多个事件(可以是函数内的多个参数绑定事件) one()操作一次 unbind() e:event()对象 pageX(获取坐标)等
.toggle(function(){},function(){})//可以绑定多个函数 可以做切换效果
运动特征:
常见效果 1、 .fadeIn() //淡入 .fadeOut() //淡出 .slideDown() //向下展开 .slideUp() //向上卷起
复杂效果 .animate()动画 stop()阻止//滑入运动事件前添加该属性不会出现bug
拖拽插件网: http://jquerui.com/demos/draggable/
版本号组件库: 1.8.22/jqurey-ui.min.js 用绝对定位写
比较好的插件库(国外):
http://workshop.rs/projects/coin-slider/
插件写法:
1.在写jqurey插件时要写成闭包的形式(布局函数)
2.以开头(function($))( 代码 )(JQurey);结尾
$.fn : 扩展插件方法
实例:
(function($){
$.fn.miaovTab = funtion(){ //$.fn.maiovTab这里的.maiovTab是插件的url地址
// This 对应的外部的