jQuery 常用api
2020年7月7日1.基本选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('*') //全选选择器 $('#id') //id选择器 $('.class') //类选择器 $('div') //标签选择器 $('.div,p,li') //并集选择器 $('li.current') //交集选择器 $('li:first') //获取第一 $('li:last') //获取最后一个 $('li:eq(2)') //获取第二个 $('li:odd') //奇数选择器 $('li:even') //偶数选择器 $('ul li') //后代选择器 $('ul>li') //子级选择器 |
2.jQuery 筛选方法(重点)
1 2 3 4 5 6 7 8 |
$('div').parent() //查找父级 $('div').children('li') //查找子级 相当于 $('div>li') $('div').find('li') //查找后代 相当于 $('div li') $('div').siblings('li') //查找兄弟节点 不包括自己 排它思想 $('div').nextAll() //查找当前元素之后 所有的同辈元素 $('div').prevAll() //查找当前元素之前 的所有同辈元素 $('div').hasClass('zf-li') //检查当前元素是否含有某一个特定的类,如果有,则返回true $('div').eq(2) //相当于 $('li:eq(2)') |
3.jQuery样式操作
1 2 3 4 5 6 |
$('div').css('color','#eeeeee') //单行样式 $('div').css({'color': 'yellow', 'font-size': '16px', 'background': 'red'}) //多行样式 $('div').addClass('zf-ui') //添加类 $('div').removeClass('zf-ui') //删除类 $('div').toggleClass('zf-ui') //切换类 有就删除 没就添加 |
4.jQuery 属性操作
1 2 3 4 5 6 7 8 |
$('a').prop('href') //获取固有属性值,如 a的href input的type $('a').prop('href','www.baidu.com') //设置固有属性值,如 a的href input的type $('a').attr('index') //获取自定义属性值 $('a').attr('index','2') //设置自定义属性值 $('a').data('index') //数据缓存data 获取属性名为data-index的值,如果没有就从元素内存中获取 $('a').data('index','3') //数据缓存data 设置data-index 为 3 写到 元素内存中 |
5.jQuery 内容操作
1 2 3 4 5 6 7 8 |
$('a').html() //获取html $('a').html('<p>123</p>') //设置html $('a').text() //获取文本 $('a').text('123') //设置文本 $('input').val() //获取表单的值 $('input').val('123') //设置表单的值 |
6.jQuery尺寸操作
1 2 3 4 5 6 7 8 |
$('div').width() //只获取 width $('div').height() //只获取 height $('div').innerWidth() //只获取 width + padding $('div').innerHeight() //只获取 height + padding $('div').outerWidth() //只获取 width + padding + border $('div').outerHeight() //只获取 height + padding + border $('div').outerWidth(true) //只获取 width + padding + border + margin $('div').outerHeight(true) //只获取 height + padding + border + margin |
7.元素位置操作
1 2 3 4 5 6 7 |
$('div').offset() //获取元素对于文档的偏移距离,与父级没有关系返回{'top':'100','left':'120'} $('div').offset({'top':'100','left':'120'}) //设置元素对于文档的偏移距离 $('div').position() //获取父级偏移坐标,如果父级没有定位则以文档为准 只能获取不能设置 $('div').scrollTop() //获取选中元素 头部 被卷去的内容 px大小 $('div').scrollLeft() //获取选中元素 左部 被卷去的内容 px大小 $('body, html').stop().animate({scrollTop:0}) //动画效果返回头部如果觉得使用 scrollTop 太生硬的话 |
8.jQuery 遍历元素
1 2 3 4 5 6 7 8 |
/** * object :表示对象,任何一个对象 * index :表示索引 * domElement :表示dom元素 ,如果需要使用jquery 的方法需要转换 $(domElement) */ $('a').each(function(index ,domElement){}) //第一种方式 $.each(object, function (index, element) {}) //第二种方式 |
9.jQuery添加元素,删除元素 ,创建元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * 创建元素 */ $('<li>这就是创建元素</li>') /** * 内容添加元素 */ element.prepend($('<li>这就是创建元素</li>')) //内部 从开头添加 element.append($('<li>这就是创建元素</li>')) //内部 从尾部添加 /** * 外部添加元素 */ element.before($('<li>这就是创建元素</li>')) //外部 从开头添加 element.after($('<li>这就是创建元素</li>')) //外部 从尾部添加 /** * 删除元素 */ element.remove() //删除匹配元素本身 自杀 element.empty() //删除匹配的元素集合中所有的子节点 杀子 element.html('') //清空匹配元素的内容 杀子 |
10.jquery事件绑定
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/** * events : 代表事件 多个事件用空格隔开 * selector : 元素的子元素选择器,就是二次筛选,就是 '>' * fn : 回调方法 * ******************************************** * 一个元素绑定一个事件绑定一个方法 */ $('div').on('click', function () { console.log(11) }) /** * 一个元素绑定多个事件绑定一个方法 */ $('div').on('click mouseover ', function () { console.log(11) }) /** * 一个元素绑定多个事件多个方法 */ $('div').on({ click: function () { console.log('click'); }, mouseover: function () { console.log('mouseover'); } }) /** * 使用on事件委派 */ $('ul').on('click', 'li', function () { console.log('点击li就是打印这行文本'); }) |
hover事件鼠标经过和离开
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * 鼠标经过和离开事件 * 两个事件绑定一个方法 */ $('div').hover(function(){ console.log('鼠标经过触发这个 ,鼠标离开也触发这个'); }) /** * 鼠标经过和离开事件 * 两个事件,分别绑定一个 */ $('div').hover( function (event) { console.log(event) console.log('鼠标经过执行这个') }, function (event) { console.log(event) console.log('鼠标离开执行这个') } ) |
只触发一次事件
1 2 3 |
$('div').one('click', function () { console.log('这个方法只会触发一次') }) |
事件的自动触发
1 2 3 |
$('div').click() //自动触发事件 会触发默认行为 $('div').trigger('事件') //自动触发事件 会触发默认行为 $('div').triggerHandler('事件') //自动触发事件,不会触发默认行为, 如input的focus会让光标闪烁 |
11.jQuery事件解绑
1 2 3 |
$('div').off(); //解绑所有事件 $('div').off('click'); //解绑点击事件 $('ul').off('click','li'); //解除事件委托 |
12.jQuery事件对象
和javaScript基本一致
13.jQuery 效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/** * 一般都不加参数动画太丑,了解即可 * speed :速度 字符串('slow','normal','fast') 数字(1000 , 2000 ...) 毫秒 * easing :效果 默认 swing 可用 linear * opacity:透明度必须写 取值0~1 * params :css样式 {'color': 'yellow', 'font-size': '16px', 'background': 'red'} * fn :回调函数 */ $('div').show([[speed],[easing],[fn]]) //展示元素 $('div').hide([[speed],[easing],[fn]]) //隐藏元素 $('div').toggle([[speed],[easing],[fn]]) //切换元素 如果元素状态是显示就隐藏 , 如果元素状态是隐藏就显示 $('div').slideDown([[speed],[easing],[fn]]) //下拉显示 $('div').slideUp([[speed],[easing],[fn]]) //上拉隐藏 $('div').slideToggle([[speed],[easing],[fn]]) //切换元素 如果元素状态是显示就上拉隐藏 , 如果元素状态是隐藏就下拉显示 $('div').stop() //停止结束上一次动画,stop必须放在动画的前面,排除多次触发事件,导致动画一直多次播放,可以理解为节流阀 $('div').stop().show() $('div').fadeIn([[speed],[easing],[fn]]) //淡入 $('div').fadeOut([[speed],[easing],[fn]]) //淡出 $('div').fadeToggle([[speed],[easing],[fn]]) //元素切换 如果元素状态是显示就淡出,如果元素状态是隐藏就淡入 $('div').fadeTo([speed], <opacity>, [easing], [fn]) //淡出到 多少透明 $('div').animate(<params>,[speed],[easing],[fn]) //自定义动画 |
14.拷贝 extend()
1 2 3 4 5 6 7 8 9 10 11 |
/** * deep:拷贝深度默认为false 浅拷贝 * target:目标对象 * object1:待拷贝对象1 * objectN:待拷贝对象N * 浅拷贝,是把目标对象 复杂数据的数据地址 给待拷贝对象,修改 目标对象 会 印象拷贝对象 ,数据key重名value覆盖,复杂数据也覆盖 (复杂数据指对象中的对象) * 深拷贝,完全拷贝对象而不是地址 ,数据key重名value覆盖,复杂数据合并 */ $.extend([deep],target,object1,[objectN...]) $.extend(target,object1) //浅拷贝 $.extend(true,target,object1) //深拷贝 |
15.多库共存
1 2 3 4 5 |
//如果$符号冲突 我们就是用jQuery jQuery.each(jQuery('div'),function(){}) //2让jquery 释放对$的控制权让用自己的定义的符号 var zf = jQuery.noConflict(); zf.each(jQuery('div'),function(){}) |
16. jQuery 扩展库
- http://www.htmleaf.com/ jq之家
- http://www.jq22.com/ jq22
- 可以在网站上搜索 图片懒加载EasyLazyload\ 瀑布流 \ 全屏滚动(fullpage 中文文档www.dowebok.com)等
手册文档下载
https://cloud.zfajax.com/index.php?share/file&user=102&sid=bsvkDhK7
文件是没有问题的,如果打不开百度一下”chm打不开空白”.或者点击我给你找的文章https://jingyan.baidu.com/article/8275fc86b5fb6646a03cf6b0.html