关闭页面特效

前端学习之Jquery

1|0一、JQuery介绍


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

2|0二、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插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

3|0三、JQuery 内容


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

下载连接:jQuery官网

中文文档:jQuery AP中文文档

4|0四、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里的方法。

5|0五、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的方法

6|0六、JQuery的基础语法


6|16.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|26.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标签

7|0七、属性选择器


属性选择器语法:

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

实例:

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

8|0八、筛选器方法


下一个元素:

$("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|18.1 查找(find)


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

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

8|28.2 筛选(filter)


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

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

补充:

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

9|0九、表单元素选择器


: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元素

10|0十、表单对象属性


: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|0十一、操作标签


11|111.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|211.2 位置操作


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

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

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

11|311.3 尺寸操作


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

11|411.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|511.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|611.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|711.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|0十二、事件


12|112.1 常用事件


click(function(){...}) // 鼠标单击事件 hover(function(){...}) //鼠标移动到位置事件 blur(function(){...}) //失去焦点事件 focus(function(){...})//得到焦点事件 change(function(){...})//改变标签域内容事件 keyup(function(){...})//触发键盘事件

12|212.2 事件绑定


  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数
.on( events [, selector ],function(){}) ###实例: ###方法一: $("button").on("click",function () { ······· }) ###方法二: $("button").click(function () { ········· })

12|312.3 移出事件


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

  • events: 事件
  • selector: 选择器(可选的)
  • function: 事件处理函数
.off( events [, selector ][,function(){}])

12|412.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|512.5 组织事件冒泡


<style> #a{ width: 500px; height: 500px; background-color: red; } #b{ width: 400px; height: 400px; background-color: green; } #c{ width: 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|612.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|712.7 JQ页面加载DOM页面加载的区别


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

12|812.8 事件委托


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

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

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

13|0十三、动画效果


// 基本 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>

14|0十四、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

15|0十五、文件阅读器


通过文件阅读器在线预览

<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>

16|0十六、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属性


__EOF__

作  者Mr. Xu
出  处https://www.cnblogs.com/XuChengNotes
关于博主:热爱生活,爱读书/旅游,喜欢技术,乐于专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   正在学习的Barry  阅读(227)  评论(0编辑  收藏  举报
编辑推荐:
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
阅读排行:
· 趁着过年的时候手搓了一个低代码框架
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 乌龟冬眠箱湿度监控系统和AI辅助建议功能的实现
-->
点击右上角即可分享
微信分享提示