jQuery
jquery 的基本使用
jQuery 的入口函数
第一种： $(function(){
... // 此处是页面DOM加载完成的入口
})；
第二种： $(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
- 等着DOM结构渲染完毕即可执行，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
- 相当于原生js 中的DOMContentLoaded（window.onload = function(){} ） 。
- 不同于原生 js 中的 load 事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
jQuery对象和DOM对象
-
DOM对象： 用原生 js 获取过来的对象
-
jQuery对象： 用 jquery 方式获取过来的对象；本质：通过 $ 把DOM元素进行了包装
-
jQuery对象只能使用 jquery 方法，DOM 对象则使用原生 js 属性方法
<body> <div></div> <script> var div = document.querySelector('div'); // DOM对象 $('div'); // jQuery对象 </script> </body>
jQuery 对象和 DOM对象相互转换
-
DOM对象转换为jQuery对象：$(DOM对象)
$('div') -
jQuery对象转换为DOM对象（两种方式）
$('div')[index] // index 是索引号 $('div').get(index) // index 是索引号
jQuery 常用API
jQuery 选择器
-
原生 js 获取元素的方式很多，很杂，而且兼容性情况不一样，因此jQuery给我们做了封装，使获取元素统一标准
$( "选择器" ) //里面选择器直接写 CSS 选择器即可，但要加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID 选择器 | $("#id") | 获取指定的ID的元素 |
| 全选选择器 | $("*") | 匹配指定元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div,p,li”) | 选取多个元素 |
| 交集选择器 | $(“li.current”) | 交集元素 |
jQuery 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”) | 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”) | 使用空格，代表后代选择器，获取 ul 下的所有 li 元素，包括孙子等 jQuery 筛选选择器 |
jQuery 筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(“li:first”) | 获取第一个元素 |
| :last | $(“li:last”) | 获取最后一个 li 元素 |
| :eq(index) | $(“li:eq(2)”) | 获取到的 li 元素中，选择索引号为 2 的元素，索引号 index 从 0 开始 |
| :odd | $(“li:odd”) | 获取到的 li 元素中，选择索引号为 奇数 的元素 |
| :even | $(“li:even1”) | 获取到的 li 元素中，选择索引号为 偶数 的元素 |
jQuery 筛选方法（重点）
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent(); | 查找父级 |
| children(selector) | $(“ul”).children(“li”); | 相当于 $(“ul>li”),最近一级 |
| find(selector) | $(“ul”).find(“li”); | 相当于 $(“ul li”)，后代选择器 |
| siblings(selector) | $(".first").siblings(“li”); | 查找兄弟节点，不包括自己本身 |
| nextAll([expr]) | $(".first").nextAll(); | 查找当前元素之后所有的同辈元素 |
| prevtAll([expr]) | $(".last").prevAll() | 查找当前元素之前所有的同辈元素 |
| hasClass(class) | $(“div”).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类，如果有，则返回 true |
| eq(index) | $(“li”).eq(2); | 相当于 $(“li:eq(2)”) ,index 从0 开始 |
jQuery 样式操作
操作css样式
-
jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。
1、参数只写属性名，则是返回属性值
$(this).css("color");2、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color','red'); $(this).css('width',200);3、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 如果值不是数字，则需要加引号
$(this).css({ color:'white', width:300 });设置类样式方式
1、添加类
$('div').addClass("current");2、移除类
$('div').removeClass('current');3、切换类
$('div').toggleClass('current');jQuery 效果
jQuery 给我们封装了很多动画效果，最常见的如下：
显示隐藏 滑动 淡入淡出 自定义动画 show();
hide();
toggle()slideDown()
slideUp()
slideToggle()fadeln()
fadeOut()
fadeToggle
fadeTo()animate() 显示隐藏效果
1、显示语法规范
show([speed],[easing],[fn])2、隐藏语法规范
hide([speed],[easing],[fn])- 参数：
- speed：三种预定速度之一的字符串（“slow”，“normal",“fast”)或表示动画时长的毫秒数值（如：1000）
- easing：（Option）用来指定切换效果，默认是”swing“，可用参数“linear”
- fn：在动画完成时执行的函数，每个元素执行一次
- 参数：
hover
1、事件切换 hover 就是鼠标经过和离开的复合写法
$('div').hover(function(){},function(){});
- hover参数：
- 第一个参数为鼠标 移入的函数（ mouseenter )
- 第二个参数为鼠标 移出的函数（ mouseleave)
2、事件切换 hover，如果只写一个函数，那么鼠标经过和鼠标移出都会触发这个函数
$('div').hover(function(){});
3、停止排队（动画或者效果如果多次触发，就会造成多个动画或者效果排队执行）
stop();
- stop()方法用于停止动画或效果
- stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
自定义动画（animate）
1、语法
-
animate(params,[speed],[easing],[fn]);
2、参数
- params ： 更改样式属性，以对象的形式传递，必须写。属性名可以不用带引号
- speed : 三种预定速度之一的字符串（”slow“，”normal“，or “fast”)或表示动画时长的毫秒数值（如：1000）。
- easing : （Option）用来指定切换效果，默认是 ”swing“，可用参数”linear“。
- fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
jQuery 属性操作
设置获取元素固有属性 prop()
所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
-
获取属性语法
prop("属性"); -
2、设置属性语法
prop("属性"，"属性值");
设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性，比如给 div 添加 index = “1” 。
-
获取属性语法
attr("属性") //类似原生 getAttribute() -
设置属性语法
attr("属性","属性值") // 类似于原生的 setAttribute()
内容文本值
html() 【 原生 innerHTML 】
html() // 获取元素的内容
html("内容") // 设置元素的内容
text() [ 原生 innerText ]
val() [ 原生,输入框中的 value ]
jQuery 元素操作
遍历元素
each()
-
jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历 （each 方法）
$("div").each(function (index,domEle) {})1、each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2、里面的回调函数有2个参数：index 是每个元素的索引号；demEle 是每个DOM元素 对象，不是jQuery对象
3、要想使用jQuery方法，需要给dom元素转换为jquery对象 $(domEle)
$.each()
语法2
$.each(object,function(index,element){})
1、$.each() 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2、里面的函数有2个参数：index 是每个元素的索引号；element 遍历内容
创建元素
var li = $("<li>创建了一个li标签</li>");
添加元素
内部添加 （例：
-
添加
- ）
$("ul").append(li); //内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
外部添加 （例：
-
的外面再添加
-
）
- ）
$("ul").after("ul"); // 把内容放入到目标元素的后面
$("ul").before("ul"); // 把内容放入到目标元素前面
删除元素
$('ul').remove(); // 删除匹配的元素
$('ul').empty(); // 删除匹配的元素集合中所有的子节点
$('ul').html("li") // 清空匹配的元素内容
jQuery 事件
jQuery 事件处理 【 on() 绑定事件 】
- on () 方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn);
1、events : 一个或多个用空格分隔的事件类型，如 “ click ”或 “ keydown ”
2 、selector : 元素的子元素选择器
3、fn: 回调函数
例：
-
$('div').on({ mouseenter:function(){ $(this).css("background","blue"); }, click:function(){ $(this).css("background","green"); } }) -
<style> .current{ background:green; } </style> <script> $(this).on("mouseenter mouseleave",function(){ $(this).toggleClass("current"); }) </script> -
on() 委派操作
-
把原来加到子元素身上的事绑定在父元素身上，就是把事件委派给父元素。
$("ul").on("click","li",function(){ alert("Hello ul 中的 li"); });
-
-
on() 动态创建
-
可以给后来动态创建的元素绑定事件
$("ul").on("click","li",function(){ alert("Hello") }); var li = $("<li>我是后来动态创建的元素</li>"); $("ul").append(li);
-
事件处理 off() 解绑事件
-
off() 方法可以移除通过 on() 方法添加的事件处理程序。
-
$(“p”).off() // 解绑P元素所有事件处理程序
-
$(“p”).off(“click”) // 解绑P元素上面的点击事件，后面的 foo 是侦听函数名
-
$(“ul”).off(“click”,“li”) // 解绑事件委托
[^one() ]: 如果有的事件只想触发一次，可以使用 one() 来绑定事件。
-
自动触发事件
1、元素、事件()
$('input').click();
2、元素.trigger(“事件”)
$('div').trigger("click");
3、元素.triggerHandler(“事件”) 【不会触发元素的默认行为】(例：当触发表单 focus() 事件时，没有光标的出现及闪烁)
$('div').triggerHandler("click");
jQuery 对象
jQuery 对象拷贝
-
如果把一个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend() 方法
$.extend([deep],target,object1,[objectN]);- deep: 如果设为 true 为深拷贝，默认为 false 浅拷贝
- target：要拷贝的目标对象
- object1：待拷贝到第一个对象的对象
- objectN：待拷贝到第N个对象的对象
- 浅拷贝就是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
- 深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性，会合并到一起。
jQuery 插件
- jQuery 功能比较有限，想要更复杂的特效效果，可以借助jQuery插件完成
- 注意：这些插件也是依赖jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件
jQuery 插件常用的网站：
1、jQuery 插件库 http://www.jq22.com/
2、jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步骤
1、引入相关文件 （jQuery 文件 和 插件文件）
2、复制相关 html、css、js（调用插件）
3、全屏滚动（fulllpage.js)
- gitHub : https://github.com/alvarotrigo/fullPage.js
- 中文翻译网站：http://www.dowebok.com/demo/2014/77/
jQuery 尺寸、位置操作
jQuery尺寸
| 语法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素宽度和高度值 只算 width / height |
| innerWidth() / innerHeight() | 取得匹配元素宽度和高度值 包含 padding |
| outerWidth() / outerHeight() | 取得匹配元素宽度和高度值 包含 padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
jQuery位置
- 位置主要有：offset() 、postition() 、scrollTop() / scrollLeft()
1、offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
② 该方法有2个属性：left、top
③ 可以设置元素的偏移：offset({ top:10,left:30 });
2、position() 获取距离带有定位父级位置（偏移）
- 这个方法只能获取，不能设置
- 如果没有定位的父级，则以文档为准
3、scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部
| 取得匹配元素宽度和高度值 包含 padding、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值 包含 padding、border、margin |
jQuery位置
- 位置主要有：offset() 、postition() 、scrollTop() / scrollLeft()
1、offset() 设置或获取元素偏移
① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
② 该方法有2个属性：left、top
③ 可以设置元素的偏移：offset({ top:10,left:30 });
2、position() 获取距离带有定位父级位置（偏移）
- 这个方法只能获取，不能设置
- 如果没有定位的父级，则以文档为准
3、scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部
- scrollLeft() 方法设置或返回被选元素被卷去的左侧
4637
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
