-
选择器
基本:first :last :even :odd :not :eq()内容
contains 内容包含某某某的节点 has 写一个选择器， $('li:has(a)') li里面有a的li属性
input[name] 有属性name的input input[name=user] name属性等于user的input input[name!=user] name属性不等于user的input // 有属性name的input // $('input[name]').css('backgroundColor', 'cyan') // 属性name值为user的input // $('input[name=user]').css('backgroundColor', 'cyan') // 属性name值不为user的input // $('input[name!=user]').css('backgroundColor', 'cyan') // 属性name值以user开头的input // $('input[name^=user]').css('backgroundColor', 'cyan') // 属性name值以user结束的input // $('input[name$=user]').css('backgroundColor', 'cyan')子元素
:first-child :last-child :nth-child // 找到li标签，li是第一个儿子节点的li标签 // $('li:first-child').css('backgroundColor', 'cyan') // 找到li标签，li是最后一个儿子节点的li标签 // $('li:last-child').css('backgroundColor', 'cyan') // 找li标签，找指定下标的li标签，这个下标是儿子节点里面的第几个 // $('li:nth-child(1)').css('backgroundColor', 'cyan') -
样式添加. 属性获取
css({}) // 可以连写-链式操作 // $('#lala').css('backgroundColor', 'red').css('fontSize', '30px') // 可以传递一个js对象，直接全部修改 // $('#lala').css({backgroundColor: 'blue', fontSize: '40px'}) attr() // 获取指定节点的class属性 // console.log($('#lala').attr('class')) // 只能获取第一个符合要求的id属性 // console.log($('.libai').attr('id')) // 通过eq选择第二个符合要求的id属性 // console.log($('.libai:eq(1)').attr('id')) // 给指定节点添加属性 // $('#lala').attr('class', 'bai').attr('name', '狗蛋') removeAttr() // 将指定节点的属性删除 // $('#lala').removeAttr('class') prop() 经常用来设置checked. selected等属性，设置的值就是true. false // 所有下标大于1的多选框选中 // $('input:gt(1)').prop('checked', true) // 将第二个下拉框设置为默认选中 // $('#se > option:eq(2)').prop('selected', true) addClass // $('#lala').addClass('hei') removeClass // 给指定的节点添加类名 // $('#lala').addClass('hei') // 给指定的节点移除指定的节点class名 bai // $('#lala').removeClass('bai') toggleClass // 有bai这个class，那就是删除这个class，没有bai这个class，那就是添加class // $('#lala').toggleClass('bai') html() // 读取或者设置节点内容，和innerHTML功能相同 // console.log($('#lala').html('醉卧沙场君莫笑,古来征战几人回')) text() 读取或者设置节点内容，和innerText功能相同 val() // 读取input框里面的内容 // console.log($('#ip').val()) // 设置input框里面的内容 // console.log($('#ip').val('今天中午吃什么呢？')) width() height() // 读取指定对象宽度 不带px // console.log($('#dudu').width()) // 设置宽度 不带px // console.log($('#dudu').width(300)) // 读取高度 // console.log($('#dudu').height()) // 设置高度 // console.log($('#dudu').height(400)) offset() // 获取div的top值和left值 // console.log($('#dudu').offset().top, $('#dudu').offset().left) -
js对象和jquery对象转化
js对象和jquery对象的函数不能通用 js对象和jquery对象相互转化 // var odiv = document.getElementById('dudu') // js对象转化jquery对象 // console.log($(odiv).width()) // jquery对象转化为js对象 // console.log($('#dudu')[0].style.width) // console.log($('.lala')[1].style.width) -
文档处理
append appendTo prepend prependTo // 向父节点添加子节点 // $('#car').append('<li>本田飞度</li>') // 通过子节点调用，添加到父节点 // $('<li>本田飞度</li>').appendTo($('#car')) // 通过父节点调用，添加到父节点的最前面 // $('#car').prepend('<li>本田飞度</li>') // 通过子节点调用，添加到父节点的最前面 // $('<li>通用别克</li>').prependTo($('#car')) after before // 是兄弟节点关系，在mao节点后面添加一个指定节点 // $('#mao').after('<li>铃木雨燕</li>') // 是兄弟节点关系，在mao节点前面添加一个指定节点 // $('#mao').before('<li>铃木雨燕</li>') empty remove // 清空指定节点里面的内容，节点还在 // $('#mao').empty() // 原生js中：父节点.removeChild(子节点) // 通过子节点直接调用，删除当前节点 // $('#mao').remove() -
筛选和查找
eq // $('li').eq(n).css('backgroundColor', 'red') // $('li:eq(0)').css('backgroundColor', 'red') // $('li:eq(' + 0 + ')').css('backgroundColor', 'red') first last // 第一个li 和:first 一模一样 // $('li').first().css('backgroundColor', 'red') // 最后一个li 和:last 一模一样 // $('li').last().css('backgroundColor', 'red') hasClass // 判断有没有这个class,有就返回true，没有返回false // console.log($('li').eq(0).hasClass('wang')) filter // 找到所有li，过滤出来 .jing 的这些li // $('li').filter('.jing').css('backgroundColor', 'cyan') slice // 取出符合要求li里面的第0个和第1个 [start, end) // $('li').slice(0, 2).css('backgroundColor', 'cyan') children // 所有的儿子节点 // $('#nan').children().css('backgroundColor', 'red') // 儿子节点中 有 .feng 的节点 // $('#nan').children('.feng').css('backgroundColor', 'red') find // 去子孙节点中查找所有的 .feng 的节点 // $('#nan').find('.feng').css('backgroundColor', 'cyan') next nextAll // 指定对象的下一个兄弟节点 // $('#wu').next().css('backgroundColor', 'cyan') // 指定对象的后面所有的节点 // $('#wu').nextAll().css('backgroundColor', 'cyan') prev 指定对象的上一个兄弟节点 prevAll 指定对象的上面所有的兄弟节点 parent parents // 找到当前节点的父节点 // $('.lin').parent().css('backgroundColor', 'cyan') // 查找得到所有的上层节点 // $('#qing').parents().css('backgroundColor', 'cyan') // 查找得到指定的上层节点 // $('#qing').parents('div').css('backgroundColor', 'cyan') siblings // 查找qing节点所有的兄弟节点 // $('#qing').siblings().css('backgroundColor', 'orange') // 查找qing节点所有的兄弟节点，而且是.lin的兄弟节点 // $('#qing').siblings('.lin').css('backgroundColor', 'orange') -
事件
添加事件$('div).click(function () {})事件绑定
on off one绑定事件 ``` $('div').on('click', test1) $('div').on('click', test2) ``` 取消事件绑定 ``` $('div').off('click', test2) // 事件只能触发一次 $('div').one('click', test2) ```取消冒泡
ev.stopPropagation()阻止默认行为
ev.preventDefault()获取鼠标坐标
ev.pageX, ev.pageYindex
// 得到指定jquery对象在前面数组中的下标 // console.log($('div').index($('#heng'))) -
动画
show() // 参数1：动画的事件 // 参数2：动画完毕之后执行的函数 $('#dudu').show(5000, function () { alert('菊花残,满地伤') }) hide() 和show一样 $('#dudu').hide(5000, fn) slidedown() 原来不显示，动画下拉显示 $('#dudu').slideDown(5000) slideup() 原来显示，动画的上拉消失 slideToggler() 如果隐藏就下拉显示，如果显示就上拉消失 fadeIn() // 慢慢的显示出来 // $('#dudu').fadeIn(5000) fadeOut() // 慢慢的消失 // $('#dudu').fadeOut(5000) fadeTo() // 5秒之内，透明度变为0.01 // $('#dudu').fadeTo(5000, 0.01) fadeToggle() 如果隐藏就淡入显示，如果显示就淡出消失 自定义的动画效果 animate() // 自定义动画 // $('#dudu').animate({width: 1000, height: 500, opacity: 0.1}, 5000) stop() 停止动画 $('#dudu').stop() -
jquery插件
-
ajax. bootstrap
网友评论