1.1jQuery介绍
1.1.1 jQuery的概念
- jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
- j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装， 我们可以快速的查询使用里面的功能。
- jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设 计和 Ajax 交互。
- jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用 它，从而提高开发效率
- jQuery的优点【链式编程、轻量级、支持插件扩展开发、跨浏览器兼容、隐式迭代。 】 对事件、样式、动画支持，大大简化了DOM操作
1.1.2 jQuery的入口函数
jQuery中常见的两种入口函数：
// 第一种: 简单易用。
$(function () {
... // 此处是页面 DOM 加载完成的入口 }) ;
// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口 });
总结：
- 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成， jQuery 帮我们完成了封装。
- 相当于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完 毕才执行内部代码。
- 更推荐使用第一种方式。
1.1.3 jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 :
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原 生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对 象转换为DOM对象才能使用。
// 1.DOM对象转换成jQuery对象，方法只有一种 var box = document.getElementById('box'); // 获取DOM对象 var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象
// 2 jQuery 对象转换为 DOM 对象有两种方法： // 2.1 jQuery对象[索引值] var domObject1 = $('div')[0]
// 3 Query对象.get(索引值) var domObject2 = $('div').get(0)
1.3 jQuery选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做 了封装，使获取元素统一标准。
1.3.1. 基础选择器
- $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
- ID 选择器 $（“#id”）获取指定的id元素
- 全选选择器 $（‘*’） 匹配所有的元素
- 类选择器 $（“.class”） 获取同一类的class的元素
- 标签选择器 $（‘div’）获取同一标签所有元素
- 并集 $(‘div.p.li’) 交集选择器 $(‘li.current’）
- 子代选择器 $(“ul>li”) 后代选择器 $(“ul li”)
1.3.2.筛选选择器
- ：first【：last】 $(‘li:first’) 【 $(‘li:last’) 】获取第一个[最后一个]元素
- :eq(index) $(“li:eq(2)”) 获取li元素中，选择索引号为2的元素，索引号index从0开始
- ：odd $(“li:odd”) 获取li元素中索引为奇数的元素
- ：even $("li:even ") 获取li元素中索引为偶数的元素
<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>
- List item
1.4 jQuery样式
1.4.1 css样式控制
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式
注意：css() 多用于样式少时操作，多了则不太方便
- 参数只写属性名，则是返回属性值 var strColor = $(this).css(‘color’);
- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是 数字可以不用跟单位和引号 $(this).css(’‘color’’, ‘‘red’’);
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以 不用加引号 $(this).css({ “color”:“white”,“font‐size”:“20px”});
1.4.2 类名操作
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
- 添加类 $(“div”).addClass(“current”);
- 删除类 $(“div”).removeClass(“current”);
- 切换类 $(“div”).toggleClass(“current”);
- 检测类$(“div”).hasClass(“current”);
1.5 jQuery动画
-
缩放
显示 jQuery对象.show(speed,easing,fn);
隐藏jQuery对象.hide(speed,easing,fn);
切换jQuery对象.toggle(speed,easing,fn); -
下拉和向上卷去
显示 jQuery对象.slideDown(speed,easing,fn);
隐藏jQuery对象.slideUp(speed,easing,fn);
切换jQuery对象.slideToggle(speed,easing,fn); -
淡入淡出
显示 jQuery对象.fadeIn(speed,easing,fn);
隐藏jQuery对象.fadeOut(speed,easing,fn);
切换jQuery对象.fadeToggle(speed,easing,fn); -
自定义动画
animate(params,[speed],[easing],[fn])
：params 需要传入一个对象
animage({
样式属性名:目标值,
样式属性名:目标值
},1000)
停止动画jQuery对象.stop(clearQueue,jumpToEnd);开发中常用的stop方法，一般不传入实参。使用默认值。
1.6 jQuery属性文本元素操作
-
1.61 jQuery操作标签的属性
- jQuery对象.attr(name,value)可以操作自定义属性
- jQuery对象.data(name,value)用于操作自定义属性，需要具有data-前缀
- 移除标签的属性:removeAttr(name);
- prop方法操作属性:针对：selected、checked、disabled,只能操作基本属性。
- 获取:$(‘input’).prop(‘属性名’)
- 设置:$(‘input’).prop(‘属性名’,值);
-
1.62 jQuery操作文本属性值
- 操作标签内部的文本:jQuery对象.text();
- 操作标签内部的所有内容:jQuery对象.html();
- 操作表单元素的内容:jQuery对象.val();
-
1.63 jQuery元素操作
- 一 、遍历元素
- 1.1 $(“div”).each(function(index,domEle){ xxx ;})
- each()方法遍历匹配每一个元素，主要用DOM处理
- index是索引号 domEle 是每个DOM对象
- 1.2 $.each(object,function(index,element){{xxx;})
- $.each()方法可用于遍历任何对象；数组对象
<body> <div>1</div> <div>2</div> <div>3</div> <script> $(function() { // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是 比for强大） var sum = 0; var arr = ["red", "green", "blue"]; // 1. each() 方法遍历元素 $("div").each(function(i, domEle) { / / 回调函数第一个参数一定是索引号 可以自己指定索引号号名称 // console.log(i); // 回调函数第二个参数一定是 dom 元素对象，也是自己命名 // console.log(domEle); // 使用jQuery方法需要转换 $(domEle) $(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> </body>- 二 创建、添加、删除元素
- 创建一个动态的< li>
$("<li></li>") - 内部添加追加/移动元素
- 新创建jQuery对象.appendTo(‘父元素选择器’ 或 父元素jQuery对象);
- 父元素jQuery对象.apeend(新创建的jQuery对象);$(selector).append(content) 向被选元素的（内部）HTML 追加内容
- prepend()向被选元素的（内部）HTML “预置”（Prepend）内容
- prependTo() 向每个匹配的元素内部前置内容。
- $(selector).after(content) 在被选元素之后添加 HTML
- $(selector).before(content) 在被选元素之前添加 HTML
- appendTo() 向匹配的元素内部追加内容。
- prependTo()向每个匹配的元素内部前置内容。
- insertAfter()在某个元素之后插入元素
- insertBefore() - 在某个元素之前插入元素
- 创建一个动态的< li>
- 删除元素
- element.remove()// 删除匹配的元素（本身）
- element.empty() // 删除匹配的元素集合中所有的子节点
- element.html(" ")// 清空匹配的元素内容
<body> <ul> <li>原先的li</li> </ul> <div class="test">我是原先的div</div> <script> $(function() { // 1. 创建元素 var li = $("<li>我是后来创建的li</li>"); // 2. 添加元素 // 2.1 内部添加 // $("ul").append(li); 内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 // 2.2 外部添加 var div = $("<div>我是后妈生的</div>"); // $(".test").after(div); $(".test").before(div); // 3. 删除元素 // $("ul").remove(); 可以删除匹配的元素 自杀 // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子 }) </script> </body> - 1.1 $(“div”).each(function(index,domEle){ xxx ;})
- 一 、遍历元素
1.7 jQuery尺寸、位置操作
1.7.1. jQuery 尺寸操作
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模 型。
语法
- width()/height() ---->取得匹配元素宽高
- innnerWidth()/innerHeight() 包括padding值 取元素宽高
- outerWidth/outerHeight() 包括padding border 取宽高
- outerWidth(true)/outerHeight(true) 包括padding border margin 取宽高
注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设 置，还要使用 css() 等方法配合。 1.4.2. jQuery 位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体 介绍如下:
语法
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和 height + padding + border + margin
console.log($("div").outerWidth(true)); })
</script>
</body>
1.7.2. jQuery 位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体 介绍如下:
语法：
- offset（）设置或获取元素偏移量
- offset()方法设置或返回被选中元素相对于文档的便宜左边，跟父级没有关系
- 该方法的两个属性 left、top 用于获取获取距离文档左、上的距离
- 例： 设置元素偏移 offset({top:10,left:30})
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，没有父级以文档为主
- 该方法的两个属性 left、top 用于获取获取距离父级(文档)左、上的距离
- scrollTop/scrollLeft()设置或获取元素被卷去的头部和左侧
- scrollTop（）方法设置或返回被选中元素被卷去的头部
- 不跟参数是获取
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移）offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位 的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
// 3. 被卷去的头部
$(document).scrollTop(100);
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn(); } else { $(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({ scrollTop: 0 });
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
}) })
</script>
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
