Web前端-jQuery
2024-05-30 14:20:29
目录
1 前言
2 概述
2.1 jQuery是什么
2.2 jQuery在js中的使用
2.3 dom对象和jQuery对象
3 jQuery的基本语法
3.1 选择器
3.2 表单选择器
3.3 过滤器
3.4 表单属性过滤器
4 函数
4.1 val
4.2 text
4.3 attr
4.4 remove
4.5 empty
4.6 append
4.7 html
4.8 each
5 jQuery中的事件
6 使用jQuery实现ajax
1 前言
在学ajax的时候我们就接触了jQuery，但当时觉得有点混乱，也没有认真学习，这次专门再学一次吧。
我们发现一个问题：在我们写js代码的时候，总是会写很多重复的内容，就比如最简单的获取根据id获取元素（getElementById），我们经常使用这个，但是这玩意很长，每次都写很麻烦，是不是可以简化一下
<script type="text/javascript">function fun1(){//var text1 = document.getElementById("text1")var text1 = a("text1")alert(text1.value)}function fun2(){//var text2 = document.getElementById("text2")var text2 = a("text2")alert(text2.value)}function a(obj){var objElt = document.getElementById(obj)return objElt}</script><input type="text" id="text1" /><input type="button" value="单击按钮1" onclick="fun1()" /> <br><input type="text" id="text2" /><input type="button" value="单击按钮2" onclick="fun2()" />如上，我们将根据id获取元素封装为一个 函数，这样我们直接调用这个函数就简单很多，并且函数名我们可以简化为一个字母，但是字母对我们来说经常使用，这里我们就可以使用“$”符号，它很特殊我们也基本上用不到。
2 概述
2.1 jQuery是什么
jQuery是一款JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作
可以登录官网下载查看jQuery信息：jQuery
2.2 jQuery在js中的使用
$(document).ready(function(){alert("dhiwgfew")
})如上，其中$就是函数名，document为函数的参数，$(document)的作用为将document对象变成jQuery函数库可以使用的对象。ready是jQuery中的函数，相当于js中的load事件，那function中的内容就表示onload执行后需要执行的内容。
好消息是上面代码可以简化为：
$(function(){alert("hello jquery")
})2.3 dom对象和jQuery对象
dom对象：使用js语法创建的对象为dom对象，也就是js对象,比如：
- var obj = document.getElementById("text1")，其中obj就是dom对象
jQuery对象:使用jQuery语法表示对象叫做jQuery对象，注意：jQuery表示的对象都是数组，例如
- var jobj = $("#text1")，其中jobj就是jQuery对象，它是一个数组
dom对象和jQuery对象可以相互转换
- dom转为jQuery：$(dom对象)
- jQuery转为dom：从数组中获取第一个对象就是dom对象，使用[0]
演示：dom转为jQuery
<script type="text/javascript">function reverse(){var btn = document.getElementById("btn")//转为jQuery对象var jbtn = $(btn)//alert(btn.value)alert(jbtn.val())}</script><input type="button" id="btn" value="我是按钮" onclick="reverse()" />jQuery转为dom：
<script type="text/javascript">function reverse(){var btn = $("#btn")[0]alert(btn.value)}</script>3 jQuery的基本语法
3.1 选择器
选择器：就是一个字符串，用来定位dom对象的，定位了dom对象就可以通过jQuery的函数操作dom对象。
常用的选择器：
- id选择器：$("#对象的id值")，通过id找对象，id在当前页面中是唯一的
- class选择器：$(".class样式名")，class表示css中的样式
- 标签选择器：$("标签名称")
演示：
<body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">//id选择器function fun1(){var idsel = $("#idsel")idsel.css("background-color","red")}//class选择器function fun2(){var classsel = $(".classsel")classsel.css("background-color","blue")}//标签选择器function fun3(){var spansel = $("span")spansel.css("background-color","green")}//div标签选择器function fun4(){var divsel = $("div")//div标签有两个，也就是说这个数组有两个内容divsel.css("background-color","gray")}function fun5(){var ssel = $("*")//div标签有两个，也就是说这个数组有两个内容ssel.css("background-color","yellow")}</script><div id="idsel">id选择器</div><br /><div class="classsel">class选择器</div><br /><span>span选择器</span><br /><button onclick="fun1()">使用id选择器</button><br /><button onclick="fun2()">使用class选择器</button><br /><button onclick="fun3()">使用span标签选择器</button><br /><button onclick="fun4()">使用div标签选择器</button><br /><button onclick="fun5()">*标签选择器</button><br /></body>选择器可以组合使用，比如$("#id选择器,标签选择器")
3.2 表单选择器
使用input标签的type属性值，定位dom对象的方式
语法：$(":type属性值")。例如$(":text")，选择的是所有的单行文本框。演示：
<body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">function fun1(){var textObj = $(":text")alert(textObj.val())}function fun2(){var radioObj = $(":radio")//数组//取数组数据要循环for (var i = 0; i < radioObj.length; i++) {//转为js对象var domObj = radioObj[i]alert(domObj.value)}}</script><input type="text" value="这是text" /><br><input type="radio" value="这是radio=男" /><br><input type="radio" value="这是radio=女" /><br><button onclick="fun1()">测试text</button><br><button onclick="fun2()">测试radio</button><br></body> 3.3 过滤器
在定位了dom对象后，根据一些条件筛选dom对象。过滤器不能单独使用，必须和选择器一起使用
- $("选择器:first"):第一个dom对象
- $("选择器:last"):数组中的最后一个dom对象
- $("选择器:eq(数组的下标)"):获取指定下标的dom对象
- $("选择器:lt(下标)"):获取小于下标的所有dom对象
- $("选择器:gt(下标)"):获取大于下标的所有dom对象
演示:注意这里使用了事件，也就是js中的事件换成jQuery语法
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{background-color: gray;}</style></head><body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){var obj = $("div:first")obj.css("background","red")})$("#btn2").click(function(){var obj = $("div:last")obj.css("background","blue")})$("#btn3").click(function(){var obj = $("div:eq(2)")obj.css("background","yellow")})$("#btn4").click(function(){var obj = $("div:lt(2)")obj.css("background","green")})$("#btn5").click(function(){var obj = $("div:gt(2)")obj.css("background","pink")})}) </script><div>我是div--1</div><div>我是div--2</div><div>我是div--3</div><div>我是div--4</div><br><span>我是span</span><br /><button id="btn1">获取第一个dom对象</button><br><button id="btn2">获取最后一个dom对象</button><br><button id="btn3">获取下标为2的dom对象</button><br><button id="btn4">获取下标小于2的dom对象</button><br><button id="btn5">获取下标大于2的dom对象</button><br></body>
</html>
3.4 表单属性过滤器
- $(":text:enabled"),选择可用的文本框
- $(":text:disabled")，选择不可用的文本框
- $(":checkbox:checked")，复选框选中的元素
演示：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){var obj = $(":text:enabled")//设置jQuery数组值所有对象的value为helloobj.val("hello")})$("#btn2").click(function(){//获取子元素要这样获取var obj = $("select>option:selected")alert(obj.val())})$("#btn3").click(function(){//获取子元素要这样获取var obj = $(":checkbox:checked")for (var i = 0; i < obj.length; i++) {alert(obj[i].value)}})})</script><input type="text" value="我是text1" disabled /><br><input type="text" value="我是text2" /><br><input type="text" value="我是text3" /><br><input type="text" value="我是text4" disabled /><br><select><option>抽烟</option><option selected>喝酒</option><option>烫头</option></select><br><input type="checkbox" value="chouyan"/>抽烟<br /><input type="checkbox" value="hejiu" />喝酒<br /><input type="checkbox" value="tangtou"/>烫头<br /><br><button id="btn1">设置jQuery数组值所有对象的value为hello</button><br><button id="btn2">获取下拉框选中的元素</button><br><button id="btn3">获取复选框选中的元素</button><br></body>
</html>
4 函数
4.1 val
- val函数可以操作DOM对象的value属性
- $(选择器).val()：无参数调用形式，读取数组中第一个DOM对象的value值
- $(选择器).val(值)：有参数，对数组中所有DOM对象的value属性值进行统一赋值
4.2 text
- 对text内容操作
- $(选择器).text():无参数调用，读取数组中所有的DOM对象的文字显示内容，将得到的内容拼接位字符串返回
- $(选择器).text(值):有参数方式，对所有DOM对象的文字显示内容进行统一赋值
4.3 attr
- 对val，text之外的其它属性操作
- $(选择器).attr("属性名"):获取DOM数组第一个对象的属性值
- $(选择器).attr("属性名","值")：对数组中所有DOM对象属性值设为新值
以上三个函数的演示如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){alert($(":text").val())})$("#btn2").click(function(){$(":text").val("你好，text")})$("#btn3").click(function(){alert($("div").text())})$("#btn4").click(function(){$("div").text("你好，div")})$("#btn5").click(function(){alert($("a").attr("href"))})$("#btn6").click(function(){$("a").attr("href","http://www.taobao.com")})})</script><input type="text" value="我是text1" /><br><input type="text" value="我是text2" /><br><input type="text" value="我是text3" /><br><div>我是div-1</div><div>我是div-2</div><div>我是div-3</div><br><a href="http://www.baidu.com">百度</a><br><button id="btn1">得到text属性第一个value值</button><br><button id="btn2">修改text属性所有value值为你好，text</button><br><button id="btn3">得到div的text内容</button><br><button id="btn4">修改div中的text内容为你好，div</button><br><button id="btn5">获取超链接的href</button><br><button id="btn6">修改超链接的href</button><br></body>
</html>
4.4 remove
$(选择器).remove():将数组中所有DOM对象及其子对象一并删除
4.5 empty
$(选择器).empty():将数组中所有DOM对象的子对象删除
4.6 append
为数组中所有DOM对象添加子对象
以上三个函数演示：
<body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){$("select").remove()})$("#btn2").click(function(){$("select").empty()})$("#btn3").click(function(){$("select").append("<option>白嫖</option>")})})</script><select><option>抽烟</option><option>喝酒</option><option>烫头</option></select><br><button id="btn1">将数组中所有DOM对象及其子对象一并删除</button><br><button id="btn2">将数组中所有DOM对象的子对象删除</button><br><button id="btn3">为数组中所有的DOM对象添加子对象</button><br> </body>4.7 html
- 设置或返回被选元素的内容
- $(选择器).html():无参数调用方法，获取DOM数组第一个匹配元素的内容
- $(选择器).html(值):有参数调用方法，设置DOM数组中所有元素的内容，注意这个html修改内容和innerHTML功能一样，都是可以传入html格式的，然后它会按照html语法修改内容
<body><script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){alert($("div").html())})$("#btn2").click(function(){$("div").html("你好<b>王德发</b>")})})</script><div>我是div-1</div><div>我是div-2</div><div>我是div-3</div><br><button id="btn1">获取第一个div内容</button><button id="btn2">修改所有div内容</button></body>4.8 each
- each可以对数组，json和dom数组进行遍历，对每个元素调用一次函数
- 语法1：$.each(要遍历的对象,function(index,element){处理程序})
- 语法2：jQuery对象.each(function(index,element){处理程序})
- index为数组的下标，element为数组的对象
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script><script type="text/javascript">$(function(){var arr = [1,2,3]$("#btn1").click(function(){$.each(arr,function(index,element){alert("下表为："+index + "值为："+element)})})var json = {"name":"王德发","password":"123561"}$("#btn2").click(function(){$.each(json,function(index,element){alert(index+":"+element)})})var obj = $(":text")$("#btn3").click(function(){$.each(obj,function(index,element){alert("下标为："+index + "内容为："+element.value)})})})</script><input type="text" value="你好王德发" /><br><input type="text" value="你好张麻子" /><br><input type="text" value="你好黄四郎" /><br><button id="btn1">循环普通数组</button><br><button id="btn2">循环JSON</button><br><button id="btn3">循环dom数组</button><br>5 jQuery中的事件
$(选择器).事件名称。这里的事件名称就是js中的事件去掉on，比如给按钮绑定单击事件：
$("#btn").onclick(function(){})js中的onload事件可用$(function()){ }代替，以后我们都用这种方式写jQuery，就像写js一样，不过换了个语法
6 使用jQuery实现ajax
在使用jQuery之前，我们实现ajax请求需要实现4个步骤，非常的麻烦，有三个方式实现ajax请求
- $.ajax()：jQuery中实现ajax的核心函数
- $.post()：使用post方式发送ajax请求
- $.get()：使用get方式发送ajax请求
- $.post()和$.get()它们在内部都是调用的$.ajax()
- $.ajax()的参数是一个JSON的结构
JSON结构的参数说明：
- success：一个function，请求成功了，从服务器返回了数据，相当于js执行完statue==200，function的参数就是responseText
- url：请求的地址
- type：请求方式，get或者post，不区分大小写
- async：默认是true，表示异步请求，可以不写
- data:可以是字符串，数组，JSON，表示请求的参数和参数值，常用JSON格式的数据。就是请求的路径?后面穿的值
- contentType：字符串，表示从浏览器向服务器发送的参数的类型，可以不写，如果想特定之处格式为JSON格式，可以写：application/json
- dataType：表示期望从服务器端返回的数据格式，可以选择：xml、html、text、json
- error：一个function，表示当请求发送错误时执行的函数
使用jQuery请求ajax
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">$(function (){$("#btn").click(function (){var username = $("#username").val()$.ajax({url:"/ajax/queerest",data:{"username":username},dataType:"json",success:function (data){alert(data.name)}})})})
</script>
用户名:<input type="text" id="username">
<button id="btn">我是阿牛</button>
</body>
</html>将ajax中写的省市联动案例改为jQuery
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>省市联动</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">$(function (){$.ajax({url:"/ajax/ajaxrequest10",dataType:"json",success:function (data){//alert(data)$("#province").append("<option value=''>--请选择省份--</option>")$.each(data,function (i,n){$("#province").append("<option value='"+n.code+"'>"+n.name+"</option>")})}})$("#province").change(function (){$.ajax({url:"/ajax/ajaxrequest10",dataType: "json",data:{"pcode":this.value},success:function (data){$("#city").empty()$("#city").append("<option value=''>--请选择城市--</option>>")$.each(data,function (i,n){$("#city").append("<option value='"+n.code+"'>"+n.name+"</option>>")})}})})})</script><select id="province"></select>
<select id="city"></select>
</body>
</html>Web前端-jQuery相关推荐
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端——jQuery库
Web前端笔记 第七部分:jQuery 1. jQuery介绍 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库 ...
- WEB前端.jQuery
持续更新呢,莫(mo)急(yu)....ヽ(￣▽￣)ﾉヽ(￣▽￣)ﾉ 后续会补全代码块注释,并加入body标签内容 篇首节 README: 定位:WEB前端 目的:适合有jQuery知识基础萌新阅读. ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- Web前端 jQuery
1.初始jQuery 1.1.jQuery是什么? jQuery由美国人John Resig于2006年创建,jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"wr ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- Web前端—— JQuery迷你版实现以及使用
JQuery迷你版实现以及使用 tiny_jquery.js var $ = function (selector) {var ele = document.querySelector(selecto ...
- [Web 前端] Jquery 复制元素，并修改属性, 追加到另一个元素后面
cp from : https://blog.csdn.net/cooledi/article/details/52813668 jquery 复制元素,并修改属性 $('#ID').clone() ...
- Web前端jQuery实现监控大屏数字滚动
HTML代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
最新文章
- try…except…finally…_用先……再……然后……描写蚂蚁搬家的动作？
- vue-cli webpack配置分析 - chenBright - SegmentFault 思否
- Java之Integer源码
- ES6中箭头函数解释
- UVA11565 Simple Equations【数学+暴力】
- AD画封装的血泪教训：有叉的放在外侧
- C++线程中的几类锁
- 网络核心之数据交换-电路交换
- 设计模式之GOF23责任链模式
- rocketmq模块架构图
- 计算机共享地址怎么设置到桌面,局域网共享在哪里设置
- （附源码）springboot校园购物网站 毕业设计 041037
- 热敏电阻制作温度传感器的c语言,NTC热敏电阻温度测量和控制系统.doc
- android 播放assets下视频,安卓播放assets文件里视频文件相关问题分析
- C++输入输出的格式控制2
- HEVC帧内预测参考像素检测获取和滤波
- 用java计算小数的双阶乘
- 学数学出身的计算机大牛,学霸名单公布！2020年清华姚班、智班76名学霸名单曝光，均为学科竞赛大牛！...
- 微信小程序自定义选中样式打小勾
- Poj 2010-Moo University - Financial Aid