jQuery的一些小方法

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
    },
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容