前端学习之Jquery

目录

• 一、JQuery介绍
• 二、JQuery的优势
• 三、JQuery 内容
• 四、JQuery对象
• 五、JQuery创建对象
• 六、JQuery的基础语法
  • 6.1 基本元素选择器
  • 6.2 基本元素筛选器
• 七、属性选择器
• 八、筛选器方法
  • 8.1 查找(find)
  • 8.2 筛选(filter)
• 九、表单元素选择器
• 十、表单对象属性
• 十一、操作标签
  • 11.1 样式操作(CSS)
  • 11.2 位置操作
  • 11.3 尺寸操作
  • 11.4 文本操作
  • 11.5 属性操作
  • 11.6 porp和attr的区别
  • 11.7 文档处理
• 十二、事件
  • 12.1 常用事件
  • 12.2 事件绑定
  • 12.3 移出事件
  • 12.4 阻止后续事件执行
  • 12.5 组织事件冒泡
  • 12.6 页面加载
  • 12.7 JQ页面加载DOM页面加载的区别
  • 12.8 事件委托
• 十三、动画效果
• 十四、each
• 十五、文件阅读器
• 十六、JQuery序列化表单数据

一、JQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

二、JQuery的优势

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

三、JQuery 内容

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档操作
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

下载连接：jQuery官网

中文文档：jQuery AP中文文档

四、JQuery对象

• jQuery对象就是通过jQuery包装DOM对象后产生的对象

• jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

  $("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
  相当于： document.getElementById("i1").innerHTML;
  

• 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

五、JQuery创建对象

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象

jq对象和DOM对象之间的相互转换：

$variable[0] //jQuery对象转成DOM对象
$(dom) //DOM转成JQ对象

jQuery对象和DOM对象的使用：

$("#i1").html(); //jQuery对象使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

六、JQuery的基础语法

6.1 基本元素选择器

1.id选择器
$("#a"); //选择id属性值为a的jq对象(一个列表$("#a")[0]是一个DOM对象)

2.标签选择器
$("div"); //选择div标签

3.class选择器
$(".a"); //选择class类为a的标签

4.配合使用
$("div.c1");  //选择div标签中，类属性值为c1的div标签

5.所有元素选择器
$("*"); //选择所有标签元素(列表形式返回)

6.组合选择器
$("#a, .b, div"); //找到id属性值为a、类为b、标签div的这些标签

7.层级选择器
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y"); // 找到所有紧挨在x后面的y
$("x ~ y"); // x之后所有的兄弟y

6.2 基本元素筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

实例1：

$("div:first") // 选择html中第一个div元素

$("div:last")// 选择html中最后一个div元素

$("div:eq(5)")// 找到html中的第5个div元素

$("div:even")// 匹配所有索引值为偶数的div元素，从0开始计数

$("div:odd")// 匹配所有索引值为奇数的div元素，从 0 开始计数

$("div:gt(2)")// 匹配所有大于给定索引值的元素

$("div:lt(2)")// 匹配所有索引小于2的div标签元素

$("div:not(.c1)")// 找到所有不包含c1样式类的div标签

$("div:not(:has(a))")// 找到所有后代中不含a标签的div标签

七、属性选择器

属性选择器语法：

[attribute] //需要选择的属性
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

实例：

<input type="text">
<input type="password">
<input type="checkbox">
    
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

八、筛选器方法

下一个元素：

$("div").next() //div标签的下一个并集元素

$("div").nextAll() // div标签的所有的并集元素
$("div").nextUntil("a") //选择div下面的的并集元素，一直到与它并集的a标签元素结束，不包括a元素

上一个元素：

$("div").prev() //div标签并集的上一个元素
$("div").prevAll() //div标签并集的上层所有元素
$("div").prevUntil("a") // div并集的上面的元素，一直到a元素，不包括a元素

父亲元素：

$("#id").parent()//查找当前元素的父级元素，
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("匹配的元素") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

8.1 查找(find)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p") //等价于 $("div p")

8.2 筛选(filter)

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的div元素
// 等价于 $("div.c1")

补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

九、表单元素选择器

:text //找到所有的text的input元素

:password //找到所有的password的input元素

:file //找到所有的file的input元素

:radio //找到所有的radio的input元素

:checkbox //找到所有的checkbox的input元素

:submit //找到所有的submit的input元素

:reset //找到所有的reset的input元素

:button //找到所有的button的input元素

实例1：

$(":text")  //找到所有的text的input元素

$(":password")  //找到所有的password的input元素

$(":file")  //找到所有的file的input元素

$(":radio")  //找到所有的radio的input元素

$(":checkbox")  //找到所有的checkbox的input元素

$(":submit")  //找到所有的submit的input元素

$(":reset")  //找到所有的reset的input元素

$(":button")  //找到所有的button的input元素

十、表单对象属性

:enabled //表单对象是可用，默认可用

:disabled //表单对象不可用，设置了表示这个对象不可用

:checked //对象默认被选中的元素，不需要人为的去选择（checkbox和radio用）

:selected // 找到对象已经被选中的元素

实例1：找到可用的input标签

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签，找到的是name=“id”的input元素

实例2：找到被选中的option

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到被选中的option

十一、操作标签

11.1 样式操作(CSS)

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

####实例：
$("#a").addClass("d");//为a类的标签元素添加d类
$("#a").removeClass("d") //a类的标签元素移除d类
$("#a").hasClass("d");//a类的标签元素判断d类存不存在
$("#a").toggleClass("d") //a类元素是否有b类，有删除，没有添加

实例：

DOM对象：
css("color","red")//DOM操作：tag.style.color="red"

JQ对象：
$("p").css("color", "red"); //将所有p标签的字体设置为红色

11.2 位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

######实例：
$("#a").offset()
$("#a").position()
$("#a").scrollTop()
$("#a").scrollLeft()

.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

11.3 尺寸操作

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

####实例：
$("#a").height() //当前元素的高度
$("#a").width() //当前元素的宽度
$("#a").innerWidth() //当前元素内部内容占的宽度
$("#a").innerHeight()//当前元素内部内容占的高度
$("#a").outerHeight()//
$("#a").outerWidth()

11.4 文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

####实例：
$("#a").html()//取得id为a的元素的hrml的所有内容
$("#a").html("hello") //将id为a的元素的html内容改为hello
$("#a").html("<p>hello</p>")//可以直接上标签对象

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

####实例：
$("#a").text()//取得id为a的元素的文本内容
$("#a").text("hello") //将id为a的元素的文本内容改为hello

#####报错
$("#a").text("<p>hello</p>")//报错

值:

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

###实例：
$("#a").val()//获取id为a的元素的第一个文本内容
$("#a").val("beijing")//设置匹配的值

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
//设置name属性为hobby的元素，value为basketball或者football的元素的value为1和2

实例：获取被选中的checkbox或radio的值

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
    
    
###实例
$("innput[name="gender"]:checked").val()

11.5 属性操作

用ID等或自定义属性

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性


####实例：
$("div").attr("name") //获取div元素的name属性的值
$("div").attr("age","18")//设置div元素的age属性值
$("a").attr({"name":"cecilia","age":"18"}) //对a元素进行一次性赋值，用字典的形式
$("a").removeattr("name") //移除a元素的name属性

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性


####实例：
$("input").prop("checked") // 返回的十布尔值
$("input").prop("checked",false) //将input元素的checked属性设为false
$("input").attr("checked") //查看inoput元素的checked的属性值

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

11.6 porp和attr的区别

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

举例1：

<input type="checkbox" id="i1" value="1">
    
    
### 测试1
$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。


### 测试2
<input type="checkbox" checked id="i1" value="1">
$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

测试2：针对自定义属性，attr和prop的区别：

<input type="checkbox" checked id="i1" value="1" me="自定义属性">
    

### 测试：
$("#i1").attr("me")   // "自定义属性"
$("#i1").prop("me")  // undefined
可以看到prop不支持获取标签的自定义属性。

总结：

1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

11.7 文档处理

把一个标签添加到指定的元素内部的最后(最后一个子节点之后)

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

把一个元素标签添加到指定元素内部的最签名(第一个子节点之前)

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面(最后一个兄弟节点)

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的最前面(第一个兄弟节点的最前面)

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。

empty()// 删除匹配的元素集合中所有的子节点。
$(".b").empty() //删除所有有b类属性的列表集合

十二、事件

12.1 常用事件

click(function(){...}) // 鼠标单击事件

hover(function(){...}) //鼠标移动到位置事件

blur(function(){...}) //失去焦点事件

focus(function(){...})//得到焦点事件

change(function(){...})//改变标签域内容事件

keyup(function(){...})//触发键盘事件

12.2 事件绑定

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

.on( events [, selector ],function(){})


###实例：
###方法一：
$("button").on("click",function () {
        ·······
    })

###方法二：
 $("button").click(function () {
     ·········
	 })

12.3 移出事件

off() 方法移除用 .on()绑定的事件处理程序。

• events： 事件
• selector: 选择器（可选的）
• function: 事件处理函数

.off( events [, selector ][,function(){}])

12.4 阻止后续事件执行

1. return false; // 常见阻止表单提交等
2. e.preventDefault();

实例：

<form>
    <input type="text" value="" id ="id"><span class="hid">不能为空</span>
    <br>
    <input type="submit" value="拜拜！" id="sub">
</form>
<script>
    $("#sub").on("click",function (e) {
           var data= $("#id").val();
           if(!data.trim()){
               $(".hid").removeClass("hid");
               //第一种阻止事件的方法
               // return false
                //第二种阻止事件的方法
               e.preventDefault()
           }
    })

友情提醒：像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

<button>点击这里</button>
<script>
    $("body").on("click","button",function () {
        console.log(123)
    })
</script>

12.5 组织事件冒泡

<style>
    #a{
 500px;
height: 500px;
background-color: red;
}
#b{
 400px;
height: 400px;
background-color: green;
}
#c{
 200px;
height: 200px;
background-color: black;
}
</style>
<script>
        $(function(){
        $("#a").on("click",function () {
            alert("第一")
        });
        $("#b").on("click",function (e) {
            alert("第er");
            e.stopPropagation();//阻止事件冒泡
        });
        $("#c").on("click",function (e) {
            alert("第san");
            e.stopPropagation();//阻止事件冒泡,因为这个div元素十最小的子标签，锁以点击它的时候，会一直连带的触发他的爸爸和爷爷，所以需要组织它事件的执行
        });
    })
</script>

<div id="a">
    <div id="b">
        <div id="c"></div>
</div>

12.6 页面加载

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。(window.onload() 等待html中的所有元素都加载完毕)

两种写法（方法1）：

$(document).ready(function(){
// 在这里写你的JS代码...
})

（方法二）：简写

$(function(){
// 你在这里写你的代码
})

阻止事件冒泡实例：

# 这样写script代码
$(document).ready(function(){
    $("#a").on("click",function () {
        alert("第一")
    });
    $("#b").on("click",function (e) {
        alert("第er")
        e.stopPropagation()
    });
    $("#c").on("click",function (e) {
        alert("第san");
        e.stopPropagation()
    });
})

12.7 JQ页面加载DOM页面加载的区别

• window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
• jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

12.8 事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

实例：通过最父级的body标签设定click事件，这样html中所有的button都具有这个事件

<script>
    $("body").on("click","button",function () {
        console.log(123)
    })

</script>

十三、动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])

// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])

// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

// 自定义（了解即可）
animate(p,[s],[e],[fn])

点赞特效：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

div id="d1"点赞/div
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

十四、each

jQuery.each(collection, callback(indexInArray, valueOfElement))：

描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){
  console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

###输出
010
120
230
340

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){
  $(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：在遍历过程中可以使用 return false提前结束each循环。

终止each循环：return false

十五、文件阅读器

通过文件阅读器在线预览

<script>
	// 使用文章阅读器加载图片并展示
    $("#myfile").on("change",function () {
        // 文章阅读器
        // 1.产生文件阅读器
        var fileReader = new FileReader();
        // 2.获取上传的文件
        var file_obj = $(this)[0].files[0];
        // 3.加载文件对象到文件阅读器中
        fileReader.readAsDataURL(file_obj);    // 这一步是异步 提交完之后直接运行下一行
        // 4.利用文件阅读器将文件展示出来
        fileReader.onload = function () {
            // 展示图片有两种方式，第一种是url，第二种也可以放文件的二进制数据
            $("#myimg").attr("src",fileReader.result)
        }
    });
</script>

十六、JQuery序列化表单数据

1、serialize() 方法：

　　serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

　　您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

　　序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中，这样在ajax提交表单数据时，就不用一一列举每一个参数，只需将data参数设置为：$("form").serialize()即可。

//语法
$(selector).serialize()

　　输出标准的查询字符串：a=1&b=2&c=3&d=4&e=5

　　注释：只会将“成功的控件”序列化为字符串。（即指没被禁用的元素）如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

2、serializeArray() 方法：

　　serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。

　　您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

//格式：
var jsonData = $("form").serializeArray();

　　注意：此方法返回的是 JSON 对象而非 JSON 字符串。

　　返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

[ 
  {name: 'firstname', value: 'Hello'}, 
  {name: 'lastname', value: 'World'},
  {name: 'alias'}, // 值为空
]

　　特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

　　注意：1、不被禁用；2、包含name属性