jQuery
jQuery官网:http://jquery.com/
jQuery中需要注意的几点:
1、原生的性能大于jQuery
2、原生和jQuery不能混在一行写
3、jQuery能实现的原生都能实现,原生能实现的jQuery不一定能实现
jQuery中同一元素可以链式操作
$('div').attr().css().html().click()
jQuery中的选择器获取元素:
id --> $('#div1')
class --> $('.div1')
标签 --> $('div')
嵌套 --> $('#div1 p')
群组 --> $('#div1,p')
直接子级选择器 --> $('#div1>p')
伪类选择器
li:last 获取一组元素中的最后一个
li:first 获取一组元素中的第一个
li:eq(n) 获取一组元素中的第n个,n从0开始
li:odd 获取所有奇数元素
li:even 获取所有偶数元素
li:contains('内容') 获取内容中有contains中内容的元素
li:has('标签名') 获取标签名中有has中标签名的元素
属性选择器
$('div[id]') 获取元素中属性有id的元素
$("input[type='name']") 获取元素中属性有name的元素
$("input[type^='name']") 获取元素属性内容前面有name的元素
$("input[type$='name']") 获取元素属性内容后面有name的元素
$("input[type*='name']") 获取元素属性内容有name的元素
jQuery中常见的一些小方法:
$(this) 把原生的代码变为jQuery的
hide() 隐藏
show() 显示
hover(overFn,outFn) 鼠标移入移出
fadeIn() 淡入显示
fadeOut() 淡出隐藏
slideUp() 从下往上滑(隐藏)
slideDown() 从上往下滑(显示)
eq(n) 类似于下标,n代表第几个
addClass() 添加classname,是追加不是替换
removeClass() 删除classname
index() 元素对应的索引,索引就是元素的位置
stop() 一般运动前要先停止
offset().left 物体距离屏幕左侧距离
position().left 物体距离定位父级左侧距离
scrollTop() 物体距离顶部的滚动距离
height() 物体纯高度
innerHeight() 物体包含padding不包括border的高度
outerHeight() 物体的盒子模型高度
val() value
html() innerHtml
html('内容') 给html添加内容
$('<div></div>') 创建一个元素
父级.append(子级) 在父级内的元素后部追加
父级.prepend(子级) 在父级内的元素前面添加
obj1.after(obj2) 把obj2放到obj1后面
obj1.before(obj2) 把obj2放到obj1前面
parent() 父级
offsetparent() 定位父级
$.trim(str) 去除首尾空格
事件
on() 事件绑定(jQuery中所有的事件都是绑定好的)
off() 解除绑定
e.preventDefault(); 组织浏览器默认事件
jQuery中的循环:
$.each(obj.function(index,element){
//Code
})
index 下标
element 循环对应的对象或值
jQuery中的Ajax:
$.ajax({
url:'',
dataType:'jsonp',
json:'定义CallBack',
data:{
wd:''
},
success:{
//Code
},
error:{
//Code
}
})
当不使用jsonp跨域请求数据时可去掉dataType和json两个参数
jQuery中如何封装函数:
单个封装函数
$.fn.toRandom=function(){
//Code
}
批量封装函数
$.fn.extend({
toBlue:function(){
//Code
},
toRed:function(){
//Code
},
})