JQuery学习
2017-07-24 本文已影响10人
流星大石头
学习js遇到的痛点:
1.window.onload事件只能出现一次，如果出现多次，后面的事件会覆盖掉前面的事件
2.代码容错性差
3.有很多浏览器兼容问题
4.简单功能实现起来很麻烦：比如渐变的动画效果
JQuery的入口函数
//jquery的入口函数。 1.文档加载完毕，图片不加载的时候就可以执行这个函数。
$(document).ready(function () {
})
//jquery的入口函数。 2.文档加载完毕，图片不加载的时候就可以执行这个函数。
$(function () {
})
//jquery的入口函数。 3.文档加载完毕，图片也加载完毕的时候在执行这个函数。
$(window).ready(function () {
})
JQuery入口函数与js入口函数的区别
区别一:
Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。
区别二：执行时机不同
Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
JQuery对象和DOM对象的相互转换
JQuery对象转换成DOM对象
1.$("#demo")[0] 推荐使用
2.$("#demo").get(0)
DOM对象转换成JQuery对象方式:
//1.获取DOM对象btn
var btn = document.getElementById("demo")
//DOM对象转换成JQuery对象
$(btn)
JQuery中强大的选择器
Snip20170724_1.png
Snip20170724_2.png
Snip20170724_3.png
Snip20170724_4.png
JQuery操作DOM
1.样式操作
设置:$(selector).css(name,value)
获取:$(selector).css(name)
2.类操作
添加类样式:$(selector).addClass(className)
移除类样式:$(selector).removeClass(className)
移除被选中元素的所有类:$(selector).removeClass()
判断有没有类样式:$(selector).hasClass(className) 返回true false
切换类样式:$(selector).toggleClass(className)
为指定元素切换类，如果该元素已经有这个类了，则移除之前的类，重新添加，如果没有，直接添加
注意:此处类名不带点，所有类操作的方法类名都不带点
经验:
操作的样式非常少，那么可以通过.css()这个方法来操作
操作的样式很多，使用类的方式来操作
如果考虑以后维护方便(把css从js中分离出来)的话，推荐使用类的方式来操作。
JQuery操作元素节点
1.动态创建元素
var $spanNode = $("<span>我是一个span</span>")
var node = $("#box").html("<li>我是li</li>")
2.添加元素
<1>在元素的最后一个子元素后面追加元素：append()（重点）
作用：
在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）
如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。
如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。
// 在$(selector)中追加$node
$(selector).append($node);
// 在$(selector)中追加div元素，参数为htmlString
$(selector).append('<div></div>');
<2>不常用操作：（用法跟append()方法基本一致）
(1)appendTo()
作用：同append()，区别是：把$(selector)追加到node中去
$(selector).appendTo(node);
(2)prepend()
作用：在元素的第一个子元素前面追加内容或节点
$(selector).prepend(node);
(3)after()
作用：在被选元素之后，作为兄弟元素插入内容或节点
$(selector).after(node);
(4)before()
作用：在被选元素之前，作为兄弟元素插入内容或节点
$(selector).before(node);
3. html创建元素（推荐使用，重点）
作用：设置或返回所选元素的html内容（包括 HTML 标记）
设置内容的时候，如果是html标记，会动态创建元素，此时作用跟js里面的 innerHTML属性相同
// 动态创建元素
$(selector).html(‘<span>百度一下</span>’);
// 获取html内容
$(selector).html();
4. 清空元素
// 清空指定元素的所有子元素（光杆司令）
// 没有参数
$(selector).empty();
$(selector).html(“”);
// “自杀” 把自己（包括所有内部元素）从文档中删除掉
$(selector).remove();
5.复制元素
// 复制$(selector)所匹配到的元素
// 返回值为复制的新元素
$(selector).clone();
总结:推荐使用html(“<span></span>”)方法来创建元素或者html(“”)清空元素
操作form表单
1.属性操作
设置属性:$(selector).attr(name, value);
获取属性:$(selector).attr(name);
移除属性$(selector).removeAttr(name);
注意：JQuery中的checked、selected、disabled属性要使用prop()方法，不在使用attr方法。
2.值和内容
（1）val()方法
作用:设置或返回表单元素的值，例如:input select textarea的值
获取匹配元素的值，只匹配第一个元素
$(selector).val()
设置所有匹配到的元素的值
$(selector).val("具体值")
（2）text()方法:
作用：设置或获取匹配元素的文本内容
//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）
$(selector).text();
//设置操作带参数，参数表示要设置的文本内容
$(selector).text(“我是内容”);
尺寸位置操作:
1.宽度和高度操作
高度操作height():
作用：设置或获取匹配元素的高度值
//带参数表示设置高度
$(selector).height(200);
//不带参数获取高度
$(selector).height();
宽度操作width() ：
作用：设置或获取匹配元素的宽度值
//带参数表示设置宽度
//不带参数获取宽度
$(selector).width(200);
css()获取高度和height获取高度的区别？
$("div").height(); //返回值为number,例如:30
$("div").css("height") 返回值为string类型,例如:"30px"
2.坐标操作
offset():获取或设置元素相对于文档的位置
// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置
$(selector).offset();
// 有参数表示设置，参数推荐使用数值类型
$(selector).offset({left:100, top: 150});
注意点：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative
position() ：获取相对于其最近的具有定位的父元素的位置。
// 获取，返回值为对象：{left:num, top:num}
$(selector).position();
注意：只能获取，不能设置。
scrollTop()
作用：获取或者设置元素垂直方向滚动的位置
// 无参数表示获取偏移
// 有参数表示设置偏移，参数为数值类型
$(selector).scrollTop(100);
scrollLeft()
作用：获取或者设置元素水平方向滚动的位置
$(selector).scrollLeft(100);
JQuery中的动画效果:
1. 隐藏显示动画
show方法:让匹配的元素显示出来
// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000即2秒钟显示完毕 */
$(selector).show(2000);
// 用法二：
// 参数为字符串类型，是jQuery预设的值，共有三个，分别是：slow、normal、fast
/* 跟用法一的对应关系为： */
/* slow：600ms、normal：400ms、fast：200ms */
$(selector).show(“slow”);
// 用法三：
// 参数一可以是数值类型或者字符串类型
// 参数二表示：动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});
// 用法四：
// 不带参数，作用等同于 css(“display”, ”block”)
/* 注意：此时没有动画效果 */
$(selector).show();
hide方法:让匹配元素隐藏掉
用法参考show方法
$(selector).hide(1000); // 1000表示什么？
$(selector).hide(“slow”);
$(selector).hide(1000, function(){});
$(selector).hide();
2. 滑入滑出动画
滑入动画效果（联想：生活中的卷帘门）
作用：让元素以下拉动画效果展示出来
$(selector).slideDown(speed,callback);
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
滑出动画效果：让元素以上拉动画效果隐藏起来
$(selector).slideUp(speed,callback);
滑入滑出切换动画效果:
$(selector).slideToggle(speed,callback);
3. 淡入淡出动画
淡入动画效果:让元素以淡淡的进入视线的方式展示出来
$(selector).fadeIn(speed, callback);
淡出动画效果:让元素以渐渐消失的方式隐藏起来
$(selector).fadeOut(1000);
淡入淡出切换动画效果:通过改变透明度，切换匹配元素的显示或隐藏状态
$(selector).fadeToggle('fast',function(){});
改变透明度到某个值:调节匹配元素的不透明度
与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；
而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！
// 用法有别于其他动画效果
// 第一个参数表示：时长
// 第二个参数表示：不透明度值，取值范围：0-1
$(selector).fadeTo(1000, .5); // 0全透，1全不透
// 第一个参数为0，此时作用相当于：.css(“opacity”, .5);
$(selector).fadeTo(0, .5);
4. 自定义动画:
注意：所有能够执行动画的属性必须只有一个数字类型的值。
// 第一个参数表示：要执行动画的CSS属性（必选）
// 第二个参数表示：执行动画时长（可选）
// 第三个参数表示：动画执行完后立即执行的回调函数（可选）
$(selector).animate({params},speed,callback);
5. 停止动画：stop() 停止当前正在执行的动画
为什么要停止动画？
如果一个以上的动画方法在同一个元素上调用，那么对这个元素来说，后面的动画将被放到效果队列中。这样就形成了动画队列。（联想：排队进站）
动画队列里面的动画不会执行，直到第一个动画执行完成。
// 第一个参数表示后续动画是否要执行
（true:后续动画不执行 ;false:后续动画会执行）
// 第二个参数表示当前动画是否执行完
（true:立即执行完成当前动画 ;false:立即停止当前动画）
$(selector).stop(clearQueue,jumpToEnd);
都不给，默认false；
解释：
当调用stop()方法后，队列里面的下一个动画将会立即开始。但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。
比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
常用方式：$(selector).stop();
