jQuery
JavaScript 库 : 是一个封装好的特定的集合( 方法和函数 ) .
从封装一大堆函数的角度理解库, 就是在这个库中, 封装了很多预先定义好的函数在里面
入口函数
// 1. 传统写法 $(document).ready(function() { }) // 2. $(function()) { })
- 等着 DOM 结构渲染完毕即可执行内部代码 , 不必等所有外部资源加载完毕
- 相等于 原生js 中的DOMContentLoaded
- 不同于 原生 js 中的load 事件(等页面文档,外部 js 文件,css 文件,图片加载完毕 才执行内部代码)
$
$ 是 jQuery 的别称 , 是 jQuery 的顶级对象
jQuery 转换为 DOM对象
client.width
$('div')[index] index是索引号 //法一 $('div').get(index) index是索引号 //法二
API
jQuery 选择器
$("选择器") //括号里直接写CSS 选择器即可,但是要加引号 $(this).index() //获得当前元素索引号
筛选选择器
| 语法 | 用法 | 描述 |
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取最后一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取的li元素中,选择索引号为2的元素,索引号index从0开始 |
| :odd | $(‘li:odd’) | 获取的li元素中, 选择索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取的li元素中, 选择索引号为偶数的元素 |
| 语法 | 用法 | 说明 |
| parent() | $(‘li’).parent() | 查找父级(最近一级父元素) |
| children(selector) | $(‘ul’).children(‘li’) | 相当于$(ul>li),(子代选择器)亲儿子 |
| find(selector) | $(‘ul’).find(‘li’) | 相当于 $(‘ul li’),后代选择器(所有的后代都可以查找) |
| siblings(selector) | $(’.first’).sibling(‘li’) | 查找亲兄弟节点,不包括自己 |
| nextAll([expr]) | $(’.first’).nextAll() | 查找当前元素之后的所有同辈元素 |
| prevtAll([expr]) | $(’.last’).prevtAll() | 查找当前元素之前的所有同辈元素 |
| hasClass(class) | $(‘div’).hasClass(‘protected’) | 检查当前元素是否含有某个特定的类,如果有返回true |
| eq(index) | $(‘li’).eq(2); | 相当于$(‘li:eq(2)’,index从0开始) |
链式编程
$(this).css('color', 'red').siblings().css('color','');
隐式迭代
遍历内部DOM元素( 伪数组形式存储 )的过程叫做隐式迭代
给匹配到的所有元素进行循环遍历, 执行相应的方法,而不用我们再进行循环,简化操作
样式操作
$(function() { $(this).css("width") //参数只写属性名 则返回 值 $(this).css("width", "200px") //属性必须加引号,如果值是数字不限单位与引号 $("div").css({ width: 400, height: 400, // 参数 可以是对象形式,属性名与属性值用:(冒号)隔开 //属性可以不加引号,值为数字也可以不加引号,如果值是字符串需要加引号 }) }
$("div").click(function() { $(this).addClass(); //相当于追加类名 , 不影响之前的类名 $(this).remove(); //移除类 $(this).toggleClass(); //? })
效果
显示与隐藏
show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle() //切换
- 参数可以省略
- speed 三种(“show” , “normal” , “fast”)或者 表示动画时长的毫秒数值
- easing 用来指定切换效果,默认是 “swing” ,还有 “linear”
- fn: 回调函数 , 在动画完成后执行的函数, 每个元素执行一次
滑动
slideDown([speed,[easing],[fn]) //下滑动 slideUp([speed,[easing],[fn]) //上滑动 slideToggle([speed,[easing],[fn] ) //切换
停止
stop() //停止上次的动画 hover(function() {}, function() {}); //第一个是鼠标经过;第二个是鼠标离开 || 如果只写一个函数表示两个事件共有一个函数
淡入,淡出
fadeIn([speed,[easing],[fn]) fadeOut([speed,[easing],[fn]) fadeTo([[speed],opacity,[easing],[fn]]) //OPacity fadeToggle([speed,[easing],[fn])
- opacity 透明度必须写
- speed 三种(“show” , “normal” , “fast”)或者 表示动画时长的毫秒数值
- easing 用来指定切换效果,默认是 “swing” ,可用非参数 “linear”
自定义动画
animate(params,[speed],[easing],[fn])
- params 想要更改的样式属性 , 以对象的形式传递,属性名可以不带引号,复合属性要用驼峰式命名法
JQ属性操作
prop("属性") //获取 prop("属性", "属性值") //设置属性值 change( ) //???? //自定义 attr("属性") attr("属性", "属性值") data("属性") // 不用写data- ,返回数字型 data("属性", "属性值") //数据缓存//这里面的数据是存放在元素的内存里面
内容文本值
html() //获取元素的内容(含标签) taxt() //获取元素的内容(不含标签) //括号中可对内容进行修改 val() //设置表单值
遍历元素
$("div").each(function(index, domEle) { // index 索引号 //demEle dom元素对象 }) $.each($("div"),function(i, ele) { }) //主要处理函数 $.each(arr,function(i, ele) { })
$()//创建 element.append() //内部添加放入最后面 element.prepend() //内部添加,放最前面 element.after() //外部什么都有 element.before/ /外部什么都有 element.remove() // 删除匹配的元素 element.empty() //删除匹配元素里面的子节点
jQuery 尺寸
width( ) / height() innerWidth( ) / innerHeight() //width和 height+padding outerWidth() //width + height+padding+border outserWidth //hright+padding+border+margin
offset() offset().top /offset().left position(); //带有定位的父级 只能获取不能改变
mouseover mouseout blur focus change keydown keyup resize scroll
element.on({ }) on('click', 'li' (子选择器), function(){ }) off()解绑 //接触事件
$.each($(""),funcion(i, ele))
