JQuery
1.id $(‘#box’) 可以选择标签的#id
2.class $(‘.box’) 选择标签的.class
3.标签obj $(‘div’) 直接获得标签
4.并集选择器 $(‘#box,#box2’) 选择多个有id或class的标签
5.交集选择器 $(‘div#box1’) 选择同一标签中有某个class或id
6.派生选择器 $(‘div span’) 选择标签中的所有span标签
7.子类选择器 $(‘div>span’) 选择div下的span子集(仅包括子级)
8.紧邻兄弟选择器 $(‘div+span’) 获取div下紧挨着的span标签
9.后续选择器 $(‘div~span’) 这个div后的所有span标签
10.得到第一个 $(‘li:first’) (’某标签 冒号 first’)获得第一个某标签
11.最后一个 $(‘li:last’) 获得li的最后一个标签
12.下表索引 $(‘li:eq(3)’) 获得第几li标签的 (从0开始)
13.Get大于范围 $(‘li:gt(5)’) 获得第5+1个li标签往后的 (>5)
14.Lt小于某个范围 $(‘li:lt(3)’) 获得123之前的标签
15.Even偶数 $(‘li:even’) 获得下标为偶数的li标签
16.Odd 奇数 $(‘li:odd’) 获得下标为奇数的li标签
17.Not节点 $(‘li:not(#li1)’) 获得除了class为li1的标签外的所有li
18.标题选择 $(‘:header’) 获得文本中所有带《h》的标签
19.标题+class $(‘:header.h’) 获得标题中带class为h的标签
20.lt+gt规定范围 $(‘li:gt(1):lt(3)’) gt是从那个位置(下标)lt是个数 gt不包括本身
21.标签+class $(‘li.list’) 获得li标签下的class为list的li标签
22.包含选择器 $(‘div:contains(我)’) div中有一个内容是“我”的个标签
23.空节点 $(‘div:empty’) 如果有div为空,就可以获得空的div
24.删除元素 $(‘div.detach()’) 用detach删除的元素,
25.插入元素 $(‘div’).append(‘span’) 在div中插入span标签
26.Has选择器 $(‘div:has(p)’) 获取有这个标签的div
27.Parent父节点 $(‘div:parent’) div或标签里有内容的
属性选择器:attr 属性的意思
28.$(”a[href]”) èè a标签属性带有href的标签
29.$(“a[href=’http://baidu.con’]”) èèa标签属性等于这个连接,获取这个a标签
30.[attr!=value] $(“a[href != ‘xxxx’]”) a标签属性值不等于“xxx”获取
31. [attr^=value] $(“a[href ^= ‘http’]”) a标签属性开头不是http(正则)获
32. [attr$=value] $(“a[href $= ‘com‘]”) a标签属性结尾不是com(正则)获
33. [attr*=value] $(“a[href *= ‘cn’]”) a标签有cn的(正则)*=(所有)
34.[attr][attr] $(“a[href][title*=x]”) a标签同时有俩个属性的获取
过滤器:
35. eq()下标 $(div).eq() div的下标(空值后面解释)
36.parent() $(‘#li1’).parent() 获取li1的父亲元素
37.兄弟元素 $(“#li1”).siblings() 除了li1其他兄弟元素被选中
38.查找元素 $(‘div’).find(‘li1’) 查找div里面的li1
39.filter()类 $(‘div’).filter(‘.box’) 查找所有div类是 class=“box”40.not()类 $(‘div’).filter(‘.box’) 查找所有div类不是 class=“box”
41.本身选择 $(‘div’).has(‘span’) 当前div包含span标签的本身
42.本身类 $(‘div’).has(‘.box’) 当前div包含类是box标签的本身
43.子节点 $(‘div’).children() div的子级,可以添加id class
44.next() $(‘div’).next() 从第一个div开始往后的
45.index() $(‘div’).index() 下标,已经有值
46.val() $(“#box:checked”).val() 复选单选内容(选中)
47.val() $(“option:selected”).val() 下拉框的内容(选中)
48.appendTo() $(‘span’).appendTo($(‘div’)) (div里面有文字)
把span拼接到div里面,文字的后面
49.prependTo() $(‘span’).prependTo($(‘div’)) (div里面有文字)
把span拼接到div里面,文字的前面
50.insertBefore() $(‘div’). insertBefore($(‘span’)) div插在span前面
51.insertAfter() $(‘span’). insertAfter($(‘div’)) span插在div后面
52.距离选择èconsole.log($(‘#box’).offset().left) div,box到屏幕的左边距离
53.$(‘#box’).position().left è 有定位的父级到左边距离
54.offsetParent() $(‘#box’).offsetParent() 选中有定位的父级
55.parents() $(‘div’).parents(‘#box) 选中自己本身的祖节点
56.closest() $(‘div’).closest(‘#box’) 选中最近的祖节点(包括自己)
57.nextAll() $(‘span’).nextAll(‘p’) 从span元素开始,往后查找到所有p元素
58.prevAll() $(‘span’). prevAll(‘p’) 从span元素开始,往前查找到所有p元素
59.nextUntil() $(‘span’).nextUntil(‘h2’) spanàh2 截止 (往后)
60.prevUntil() $(‘span’).nextUntil(‘h2’) spanàh2 截止 (往前)
61.wrap()包装 $(‘span’).wrap(‘<div>’) 所有的span元素被新创建的div包裹(个体)
62.wrapAll() $(‘span’).wrapAll(‘<div>’) 所有的span元素全部整体包装63.wrapInner() $(‘span’).wrapInner(‘<div>’) span里面的所有文字被div包裹
64.unwrap()删除 $(‘span’).unwrap() 只能 删除父级包装。
动画:
65.hide()消失 $(‘#box’).hide(3000) div,box消失()里面加秒
66.show()出现 $(‘#box’).show(3000) div,box出现()里面加秒
67.fadeOut()淡出 $(‘#box’).fadeOut(3000) div,淡出()里面加秒
68.fadeIn()淡入 $(‘#box’).fadeIn(3000) div,淡入()里面加秒
69.fadeTo() $(‘#box’).fadeTo(3000) div,淡入加淡出()里面加秒
70.slideUp()动画出 $(‘#box’).slideUp (3000) div动画出()秒
71.slideDown()动画入 $(‘#box’).slideDown(3000) div动画入()秒
一:页面加载后,执行JQ:
$( function( ){ })
二:内容改变:
1.<divid=”box”>我爱学习</div>à html();
$(“#box”).click(function(){ $(“#box”).html(”谁信”) })è<div>谁信</div>
2.<pid=”p1”>我喜欢你</p>à text();
$(“#p1”).click(function(){ $(“#p1”).text(‘鬼才信’) })è<p>鬼才信</p>
3.<input type=”text” id=”text” value=”加油努力”>
<button id=”btn”>点击</button>
$(“#btn”).click(function(){ $(“#text”).val(‘奋斗,拼搏’) })
三:事件:(绑定,清除,传递, 自动)
1.$(‘#box’).on(‘click mouseover’ , function(){ alert(1) })
// 绑定俩个事件同时执行
2.$(‘#box’).on({
“click”:function(){alert(1) },
‘mouseover’:function(){alert(2) }
})
3.清除函数(事件):
$(‘box’).off(‘click’) // 清除点击事件
$(‘box’).off() // 清除所有事件
4.清除右键菜单:
$(document).contextmenu(function(){ return false })
5.转为DOM对象:
$(‘#box’).get(0).onclick = function ( ) { }
6.事件的委托(传递):delegate( )
// ul的事件挂载到li元素上
$(‘ul’).delegate(‘li’,’click’ , function( ){
$(this).css(‘background’,”red”)
})
取消事件代理:$(‘ul’).undelegate()
7.事件自动执行: trigger()
$(‘box’).click(function(){ alert(1) })
$(‘box’).trigger(); // 将点击事件成为一种自动执行事件
$(‘box’).on(‘a’,function(){ alert(123) })
//box绑定一个自定义的函数
$(‘box’).on(‘a’,function(){ alert(456) })
$(‘box’).trigger( ); // 会依次执行俩个自定义的函数
8.事件细节:this指向改变----proxy()
function show(n1,n2){console.log(n1);
console.log(n2); console.log(this) }
$.proxy(show,document )(3,4) // 将 show的this改成document
防止事件冲突: onconflict( )
四:创建克隆标签:
1.vara = $(“<li></li>”); (创建)
$(‘body’).append(a) // 将创建的标签插入 body里面
2.clone() (克隆)
<div id=”box”></div> <span></span>
$(“#box”).clone( true ).appendTo( $(‘span’) )
五:添加属性:
<div></div>
$(‘div’).attr(‘class’,’box’) // 给div添加一个 class=”box”
$(‘div’).attr(‘title’,”123”) // 给div添加一个属性 title=“123”
六:删除类添加类:
Css: .box1{ background:red } .box2{ background:blue}
JQ: $(‘div’).addClass(‘box1’) // 给div添加box1 类(属性)
$(‘div’).removeClass(“box1”) // 删除div的类(属性)
七:JQ中的元素的宽高:
$(“div”).width() / height() // div的宽高
$(“div”).innerWidth() / innerHeight() // 宽高+padding
$(“div”).outerWidth() / outerHeight() // 宽高+padding+border
$(“div”).outerWidth(true) / outerHeight(true)
// 宽高+padding+border+margin
八: JQ 中的for循环:
$(“li”).each(function(i , elem ){ $(this).html(i) })
// i 代表下标 elem元素 代表当前元素
九:元素绑定元素的css样式:
<div></div> var a=$(“div”)
<span></span> var b= a.add(“span”) //绑定前面的样式
a.css(“color”,”red”)
b.css(“color”,”green”) //给b加上样式颜色 b也会绑定a 的样式
十:将字符串转换为JSON (JQ中)
var str= ” { ‘name’: ’baobao’ } ”
console.log( $.parseJSON(str) ); // parseJSON 将字符转化为JSON
console.log($.parseJSON(str).name); //加.name取出值
十一:获取类数组:
var arr = document.getElenmentByTagName(“div”);
console.log( arr.push(1) ) //获取类数组
var arr2= $.makeArray ( arr ) //转成数组 $.makeArray
console.log(arr2);
arr2.push(1); (添加) console.log(arr2);
十 二:animate()动画:
animate( ):
第一个参数:{}运动值和属性
第二个参数:动画执行的时间(运动的快慢)默认值400sm
第三个参数:运动形式,只有俩种àswing(慢快慢,默认)-------linear(匀速)
第四个参数:回调函数。
案例:
1.------$(‘#box’).click(function(){ $(this).animate({width:300,height:300},4000,”linear”,
function( ){ } ) // 回调函数没有内容就可以用不用写
})
2.------ $(‘#box’).click(function(){
$(this).animate({width:300},2000).delay(1000).animate({width:300},2000)
// delay() // 延迟多少秒后在执行
})
3. $(‘#box’).stop() à默认值 阻止当前运动(后续继续执行)
$(‘#box’).stop(true) à阻止后续运动(当前运动继续执行)
$(‘#box’).stop(true,true) à当前运动立即到达目标,停止后续运动
$(‘#box’).finish() à 立即停止所有,达到最后的目标