jQuery

入口函数

$(document).ready(function () {
    //jq的入口函数 等DOM加载完执行
})

$(function () {
    //jq的入口函数的第二种写法
})

 

$()的本质是一个函数，jq对象是一个类数组

 

jq对象和dom对象的转换

$('div')[index]
$('div').get(index)  //两种方法转换为dom对象
$(domObj) //转换为jq对象

 

jq对象方法隐式迭代

把所有匹配的元素进行遍历循环

选择器

$('li:first') //第一个li元素  这里和css有区别 css中必须是li而且必须是第一个  这里是先把li全部选出来，再选其中的第一个
$('li:last')
$('li:eq(2)') //index从0开始 获取index = 2的元素
$('li:odd')   //获取索引为奇数
$('li:even')
$('li:checked') //选中的
$('li:selected')


$('li').parent() //找爹
$('li').parents('.one') //找多个爹中类为one的
$('ul').children('li') //找儿子 //不写的话是所有儿子
$('ul').find('li') //找后代
$('.box').siblings('li') //找兄弟，不包括自己
$('.box').prev() //上一个兄弟
$('.box').next() //下一个兄弟
$('.box').nextAll() // 找当前元素之后的所有同辈元素
$('.box').prevAll() //
$('div').hasClass('box') //检测当前元素是否含有某个特定的类，有则返回true
$('li').eq(2) //从0开始 仍然是jq对象(推荐)  $('li:eq(2)')

$('li').index() //获取当前元素的索引

操作样式和类

$('li').css('width') //获取属性值  可以获取行内和css 获取到的是真正显示出来的样式 //如果有多个对象的话,只返回第一个的
$().css('width', '200px') //设置属性值 $().css('width', 200) //会自动改成'200px' //会遍历
$().css({ color: 'red',  '200px' }) //同时设置多个属性


$().addClass('box') // 添加类
$().removeClass()  //删除类
$().toggleClass()  //

动画

$().show() //显示 3个参数可以都省略  show(1000 ,linear,function(){})  第一个参数 slow normal  fast
$().hide() //隐藏
toggle()

slideDown()
slideUp()
slideToggle()

fadeIn()
fadeOut()
fadeToggle()
fadeTo() //调整透明度  fadeTo((1000,0.5,linear,function(){})) 时间和透明度必写，其他可以省略


animate() //第一个参数是一个对象，其他参数是时间，运动方式，和回调，同样都可以省略
            //只有元素可以调用这个方法 $(document)不能 //使用$('html','body')

$("#foo").slideUp(300).delay(800).fadeIn(400);
//等800ms再执行fadeIn

hover事件

hover(function () {
    相当于mouseenter
}, function () {
    相当于mouseleave
})  // 如果只写一个 则经过和离开都会触发这一个

属性操作

//设置或获取元素自带属性
$().prop('href')
$().prop('href', 'http://www.baidu.com')

//设置或获取自定义属性
$().attr()
$().removeAttr()  //移除自定义属性

创建添加和删除

$('<div></div>'); //创建一个元素// 这个元素是jq对象
$('body').append() //添加到内容最后
$('body').prepend() //内容前面
$('div').after('<span></span>')  //放在div平级的后面
$('div').before('')
$('div').remove()  //移除div（移除本身）
$('div').empty() //删除div的所有(子节点)和事件
$('div').html('') //清空div里面的内容，不会删除子节点绑定的事件

事件绑定和解绑，事件代理，自调用事件

//jq事件不会出现覆盖 $().click(fn)和绑定的都不会覆盖
$('p').on('click', function () { }) //事件绑定
$('div').on('click', 'p', function () { })  //委托  //此时函数中的this 是p这个dom对象

$('p').off() //解除所有绑定事件
$('p').off('click')//解除click事件


//绑定事件后，使用代码的方式自调用事件
$('div').click()   //前提是div之前已经有点击事件了
$('div').trigger('click') 

获取html内容和text内容以及表单value

$().html()
$().text()
$('input').val()

函数对象方法和jq实例对象方法

$().each(function (index, ele) {
    //遍历类数组
    //ele是dom对象
    //index和ele的顺序
})

$.each(obj, function (index, ele) {
    //可以遍历任何对象，数组
    //如果是对象的话，index 是key ele是value
})

$冲突

var control = $.noConflict()
control() //
//也可以直接使用 jQuery()

jQ插件网站

www.htmleaf.com
www.jq22.com