jQuery概述
基本使用
- jQuery入口函数
等待页面DOM加载完的入口
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
- jQuery对象与DOM对象
jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法 - DOM 对象与 jQuery 对象之间是可以相互转换的
dom对象转jQuery对象： $(DOM对象)
jQuery对象转DOM对象：
$(‘div’) [index] index 是索引号
$(‘div’) .get(index) index 是索引号
jQuery选择器
1.jQuery基础选择器
1.2 jQuery 层级选择器
1.3jq设置样式
$(‘div’).css(‘属性’, ‘值’)
<script>
// 1. 获取四个div元素 不必像原生js那样便利div，其jQuery内部已经进行了遍历
console.log($("div")/* 获取jQuery对象 */);
// 2. 给四个div设置背景 颜色为粉色 jquery对象不能使用style
$("div").css("background", "pink");
// 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环 ，给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
1.4jq筛选选择器
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
1.5jq筛选方法
<script>
// 注意一下都是方法 带括号
$(function() {
// 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸
console.log($(".son").parent());
// 2. 子
// (1) 亲儿子 children() 类似子代选择器 ul>li
// $(".nav").children("p").css("color", "red");
// (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器
$(".nav").find("p").css("color", "red");
// 3. 兄
});
</script>
<script>
// 注意一下都是方法 带括号
$(function() {
// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
$("ol .item").siblings("li").css("color", "red");
// 2. 第n个元素
var index = 2;
// (1) 我们可以利用选择器的方式选择
// $("ul li:eq(2)").css("color", "blue");
// $("ul li:eq("+index+")").css("color", "blue");
// (2) 我们可以利用选择方法的方式选择 更推荐这种写法
// $("ul li").eq(2).css("color", "blue");
// $("ul li").eq(index).css("color", "blue");
// 3. 判断是否有某个类名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
});
</script>
1.6链式编程
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 让当前元素颜色变为红色
// $(this).css("color", "red");
// 3. 让其余的姐妹元素不变色
// $(this).siblings().css("color", "");
// 链式编程
$(this).css("color", "red").siblings().css("color", "");
});
})
</script>
样式操作
1.操作css方法
<script>
// 操作样式之css方法
$(function() {
console.log($("div").css("width"));//只能得到该元素的属性值
// $("div").css("width", "300px");
// $("div").css("width", 300);
// $("div").css(height, "300px"); 属性名一定要加引号
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
})
</script>
2.设置样式
类似于classList
<script>
$(function() {
// 1. 添加类 addClass()
// $("div").click(function() {
// // $(this).addClass("current");
// });
// 2. 删除类 removeClass()
// $("div").click(function() {
// $(this).removeClass("current");
// });
// 3. 切换类 toggleClass()
$("div").click(function() {
$(this).toggleClass("current");
});
})
</script>
3 类操作与className区别
原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名
jq效果
1.显示隐藏效果
- 切换语法规范
toggle([speed,[easing],[fn]]) //显示与隐藏的切换 - 切换参数
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
建议：平时一般不带参数，直接显示隐藏即可。
$(function() {
$("button").eq(0).click(function() {
$("div").show(1000, function() {
alert(1);
});
})
$("button").eq(1).click(function() {
$("div").hide(1000, function() {
alert(1);
});
})
$("button").eq(2).click(function() {
$("div").toggle(1000);
})
// 一般情况下，我们都不加参数直接显示隐藏就可以了
});
2 滑动效果
- 下滑效果语法规范
slideDown([speed,[easing],[fn]]) - 上滑效果语法规范
slideUp([speed,[easing],[fn]]) - 切换上下滑效果
slideToggle([speed,[easing],[fn]] - 系列参数同上（显示隐藏效果）
3 事件切换
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它(hover([over,]out))
<script>
$(function() {
// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
})
</script>
4 动画队列及其停止排队方法
(1）stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。
示例：$(this).children("ul").stop().slideToggle();
5 淡入淡出效果
- fadeIn([speed,[easing],[fn]]) 淡入
- fadeOut([speed,[easing],[fn]]) 淡出
- fadeToggle([speed,[easing],[fn]]) 淡入淡出切换
- fadeTo([[speed],opacity,[easing],[fn]])渐进方式调整到指定的不透明度
其中opacity必写，其值在0–1之间
6自定义动画 animate
animate(params,[speed],[easing],[fn])
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
JQ属性操作
5.1 设置或获取元素固有属性值 prop()
- 获取属性语法 ：prop(’‘属性’’)
- 设置属性语法 ：prop(’‘属性’’, ‘‘属性值’’)
5.2 设置或获取元素自定义属性值 attr()
- attr(’‘属性’’) // 类似原生 getAttribute() 获取属性
- attr(’‘属性’’, ‘‘属性值’’) // 类似原生 setAttribute() 设置属性
5.3 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除
- data(’‘name’’,’‘value’’) // 向被选元素附加数据
- date(’‘name’’) // 向被选元素获取数据
- 同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型
console.log($("span").data("uname")); // 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
:checked 选择器 :checked 查找被选中的表单元素
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
jq内容文本
普通元素内容 html()（ 相当于原生inner HTML)
html() // 获取元素的内容
html(’‘内容’’) // 设置元素的内容
普通元素文本内容 text() (相当与原生 innerText)
text() // 获取元素的文本内容
text(’‘文本内容’’) // 设置元素的文本内容
表单的值 val()（ 相当于原生value)
val() // 获取表单的值
val(’‘内容’’) // 设置表单的值
其他重要api
- parents(‘选择器’) 可以返回指定祖先元素
- 最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
（变量).toFixed 示例：var price = (p * n).toFixed(2);
元素操作
7.1 遍历元素
$(“div”).each(function (index, domEle) { xxx; }）
- each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
- 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
<script>
$(function() {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
// 1. each() 方法遍历元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
7.2 创建元素
语法：$(''<li></li>'');动态的创建了一个
-
7.3 添加元素
- 内部添加
element.append(’‘内容’’) ：把内容放入匹配元素内部最后面，类似原生 appendChild。
element.prepend(’‘内容’’) :把内容放入匹配元素内部最前面。 - 外部添加
element.after(’‘内容’’) // 把内容放入目标元素后面
element.before(’‘内容’’) // 把内容放入目标元素前面
① 内部添加元素，生成之后，它们是父子关系。 ② 外部添加元素，生成之后，他们是兄弟关系。
7.4 删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html(’’’’) // 清空匹配的元素内容
注： empt() 和 html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。jQuery 尺寸、位置操作
jq事件
1.单个事件注册
$(“div”).click(function(){ 事件处理程序 })
2. jQuery 事件处理
- 事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn)
1 . events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
2 . selector: 元素的子元素选择器 。
3 . fn:回调函数 即绑定在元素身上的侦听函数。
on（）方法绑定多个事件 $(“div”).on({ mouseover: function(){}, mouseout: function(){}, click: function(){} }); 处理事件相同 $(“div”).on(“mouseover mouseout”, function() { $(this).toggleClass(“current”); });on（）方法的事件委派：
$(‘ul’).on(‘click’, ‘li’, function() {
alert(‘hello world!’);
}); //给ul绑定的click事件，触发对象是li- off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序 $("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名 $("ul").off("click", "li"); // 解绑事件委托如果有的事件只想触发一次， 可以使用 one() 来绑定事件。
one事件与on事件用法相同，只是其 只能触发一次- 自动触发事件
其实就是调用了现有的函数不用触发直接执行
1.element.click()
2.element.trigger(“type”)
3.element.triggerHandler(type)triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别（譬如输入框的光标）
$("p").on("click", function () { alert("hi~"); }); $("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击事件对象
同之前的
jq的其他方法
jq拷贝对象
语法：$.extend([deep], target, object1, [objectN])
- deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
- target: 要拷贝的目标对象
- object1:待拷贝到第一个对象的对象。
- objectN:待拷贝到第N个对象的对象。
- 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
- 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。
多库共存
有的js库也会存在用’$'符号命名的情况，或者我们命名变量的时候用到该符号的时候也会造成冲突。
- 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(’‘div’’)
- jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
此处的xx就相当于 $ 符号
jq插件
- 内部添加
3959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
