jQuery入门到精通全套完整版

思维导图

在这里插入图片描述

p1/41p $是函数名

jQuery封装了javascript的方法调用，简化了javascript对HTML DOM操作

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210604153945566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L216ajE1MTAxMjI5ODcx,size_16,color_FFFFFF,t_7

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript">//单击按钮获取文本框1的value值function fun1(){// var obj = document.getElementById("txt1");// alert(obj.value);//上面的方法很长，通过封装函数，变得简单了var obj = getDomObj("txt1");alert(obj.value);}//单击按钮获取文本框2的value值function fun2(){// var obj = document.getElementById("txt2");var obj = getDomObj("txt2");alert(obj.value);}//编写函数封装上面的代码。function getDomObj(domId){var obj = document.getElementById(domId);return obj;}</script></head><body><input type="text" id="txt1" value="我是txt1" /><br /><input type="text" id="txt2" value="我是txt2" /><br /><input type="button" value="单击按钮1" onclick="fun1()"><input type="button" value="单击按钮2" onclick="fun2()"></body>
</html>

p2/41p $是函数名例子## p2/41p $是函数名例子

在这里插入图片描述

jQuery同样可以简化js中ajax的步骤，可以把ajax的四步简化【创建异步对象，绑定事件，初始化参数，发送请求】

jQuery的基本介绍

p4/41p jQuery下载

p5/41p 使用jQuery的第一个例子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="jquery-3.4.1.js"></script><script type="text/javascript">$(document).ready(function(){alert("Hello jQuery")})</script></head><body></body>
</html>

p6/41p jQuery入口函数简写方式

在这里插入图片描述

p7/41p DOM对象和jQuery对象

在这里插入图片描述

p8/41p DOM对象转换为jQuery对象

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="jquery-3.4.1.js"></script><script type="text/javascript">function fun(){//使用js对象获取DOM对象var domBtn = document.getElementById("btn");alert("1="+domBtn.value)//使用jQuery获取DOM对象var $btn = $(domBtn)alert("2="+$btn.val())}</script></head><body><div align="center"><input type="button" id="btn" value="转换为jQuery对象" onclick="fun()" /></div></body>
</html>

p9/41p jQuery对象转换为DOM对象

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript" >function fun1(){var domObj = $("#txt")[0];var num = domObj.value;domObj.value = num*num;}</script></head><body><div align="center"><input type="button" id="btn" value="计算平方" onclick="fun1()"><input type="text" id="txt" value="输入整数"/></div></body>
</html>

在这里插入图片描述

p10-12/41p 基本选择器，全部选择器，混合选择器使用

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{background:gray;width: 200px;height: 100px;}</style><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function fun1(){$("#one").css("background","blue");}function fun2(){$(".two").css("background","red");}function fun3(){$("div").css("background","orange");}function fun4(){$("*").css("background","yellow");}function fun5(){$("#one,span").css("background","purple");}</script></head><body><div id="one">我是id=one的div</div><br><div class="two">我是class=two的div</div><br><div>我是没有id，class的div</div><br><span>我是一行数据</span><br>操作按钮：<br><input type="button" value="选取id=one" onclick="fun1()"/><input type="button" value="选取class=two" onclick="fun2()"/><input type="button" value="选取div" onclick="fun3()"/><input type="button" value="选取所有DOM" onclick="fun4()"/><input type="button" value="选取两个DOM对象" onclick="fun5()"/></body>
</html>

p13/41p 复习

在这里插入图片描述

p14-15/41p 表单选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">function fun1(){var $obj = $(":text");alert($obj.val());}function fun2(){var $obj = $(":radio");for(var i = 0;i<$obj.length;i++){//转换为DOM对象var obj = $obj[i];alert(obj.value);}}function fun3(){var $obj = $(":checkbox");for(var i = 0;i<$obj.length;i++){var obj = $obj[i];// alert(obj.value);//jquery对象的用法alert($($obj[i]).val());}}</script>></head><body><center>文本框:<input type="text" value="我是type=text"><br>性别：<br><input type="radio" name="sex" value="male">男<br><input type="radio" name="sex" value="female">女<br>爱好：<br><input type="checkbox"  value="bike">骑行<br><input type="checkbox"  value="soccer">足球<br><input type="checkbox"  value="swim">游泳<br><p>功能按钮</p><input type="button" value="读取text的值" onclick="fun1()"><br><input type="button" value="读取radio的值" onclick="fun2()"><br><input type="button" value="读取checkbox的值" onclick="fun3()"><br></center></body>
</html>

p16/41p 过滤器

在这里插入图片描述

p17/41p 过滤器例子页面定义

在这里插入图片描述

p18/41p jQuery绑定事件方式

在这里插入图片描述

<script type="text/javascript" >$(function(){$("#btn1").click(function(){$("div:first").css("background","blue");})$("#btn2").click(function(){$("div:last").css("background","pink");})$("#btn3").click(function(){$("div:eq(3)").css("background","orange");})$("#btn4").click(function(){$("div:lt(3)").css("background","yellow");})	$("#btn5").click(function(){$("div:gt(3)").css("background","purple");})})</script>

在这里插入图片描述

p19/41p 表单属性过滤器【根据表单中的dom对象的状态情况定位dom对象】

在这里插入图片描述

p20-22p/41p 常用函数第一组

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){alert($(":text:first").val());})$("#btn2").click(function(){$(":text").val("桃园三结义");})$("#btn3").click(function(){alert($("div").text());})$("#btn4").click(function(){alert($("div:first").text());})$("#btn5").click(function(){$("div").text("我是div的新闻本；桃园三结义");})$("#btn6").click(function(){alert($("img").attr("src"));$("img").attr("src","img/ex3.jpg");})})	</script><style>div{background:lightgray;}</style></head><body><p>文本框</p><input type="text"  value ="刘备"><br><input type="text"  value ="关羽" disabled><br><input type="text"  value ="张飞"><br><br><p>文本数据text</p><div>我是第一个div</div><div>我是第二个div</div><div>我是第三个div</div><br><p>图片</p><img id="img1" src="img/ex1.jpg"><img id="img2" src="img/ex2.jpg"><p>功能按钮</p><button id="btn1">获取第一个文本框的值</button><br><button id="btn2">设置所有文本框的值为新值</button><br><button id="btn3" >获取div的所有文本</button><br><button id="btn4" >获取第一个div的文本</button><br><button id="btn5" >设置div新文本</button><br><button id="btn6" >设置img图片</button><br></body>
</html>

p23-24/41p 常用函数第二组前三个

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="js/jquery-3.4.1.js"></script><script type="text/javascript">$(function(){$("#btn1").click(function(){//使用remove删除所有的父子对象$("select").remove();})})//使用empty删除所有的子dom对象$(function(){$("#btn2").click(function(){$("select").empty();})})//给father对象append增加一个dom对象$(function(){$("#btn3").click(function(){$("#father").append("<input type='button' value='我是动态添加的input'>");//此处可以增加很多内容，比如表格。})})//获取第一个span的文本内容$(function(){$("#btn4").click(function(){alert($("span").html());})})//获取第一个span的html内容$(function(){$("#btn5").click(function(){alert($("span").text());})})//设置所有的span的值$(function(){$("#btn6").click(function(){$("span").html("我是新数据<b>数据</b>");})})</script><style>div{background:blue;}</style></head><body><p>show\hide</p><div>我是one</div><div>我是two</div><br><p>remove/empty</p><select><option >java语言</option><option >go语言</option><option >sql语言</option></select><br><p>append</p><div id="father" style="background:red">我是父亲</div><br><p>html</p><span>mysql是一个<b>数据库</b></span><br><span>使用jdbc访问数据库</span><p>功能按钮</p><input type="button" value="使用remove删除父和子对象" id="btn1"/><input type="button" value="使用empty删除父和子对象" id="btn2"/><input type="button" value="append增加一个dom对象" id="btn3"/><input type="button" value="获取第一个span文本内容" id="btn4"/><input type="button" value="获取第一个span的html内容" id="btn5"/><input type="button" value="设置所有的span的值" id="btn6"/></body>
</html>

p25/41p each函数循环普通数组

在这里插入图片描述

p26/41p each函数循环JSON，DOM对象

在这里插入图片描述

p27/41p 事件绑定方式

在这里插入图片描述

p28/41p ajax函数

在这里插入图片描述

p29-30p/41p ajax函数语法

在这里插入图片描述

p31p/41p 复习

表单【form】选择器，必须有type属性值

过滤器

函数

jQuery事件

p32p/41p 复习ajax函数

在这里插入图片描述

p33-36p/41p 级联查询

package com.bjpowernode.dao;import com.bjpowernode.entity.Province;import java.sql.*;
import java.util.ArrayList;
import java.util.List;/*** @Author：马仲杰* @Date 2021/6/5**/
public class QueryDao {private Connection conn;private PreparedStatement ps;private ResultSet rs;private String sql;private String url="jdbc:mysql://localhost:3306/bjpowernode";private String username = "root";private String password = "333";//查询所有的省份信息public List<Province> queryProvinceList(){List<Province> provinces = new ArrayList<>();try {Province p = null;//1、注册驱动Class.forName("com.mysql.jdbc.Driver");//2、获取连接conn = DriverManager.getConnection(url,username,password);sql = "select id,name,jiancheng,shenghui from province order by id";//3、创建操作对象ps = conn.prepareStatement(sql);//4、执行sql语句rs = ps.executeQuery();//4、查询结果集while (rs.next()){p = new Province();p.setId(rs.getInt("id"));p.setName(rs.getString("name"));p.setJiancheng(rs.getString("jiancheng"));p.setShenghui(rs.getString("shenghui"));provinces.add(p);}} catch (ClassNotFoundException e) {e.printStackTrace();} catch (SQLException e) {e.printStackTrace();} finally {if (rs != null){try {rs.close();} catch (Exception e) {e.printStackTrace();}}if (ps != null){try {ps.close();} catch (Exception e) {e.printStackTrace();}}if (conn != null){try {conn.close();} catch (Exception e) {e.printStackTrace();}}}return provinces;}
}

package com.bjpowernode.controller;import com.bjpowernode.dao.QueryDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;/*** @Author：马仲杰* @Date 2021/6/5**/
@WebServlet(name = "QueryProvinceServlet")
public class QueryProvinceServlet extends HttpServlet {protected void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {String json = "{}";//调用dao.获取所有的省份信息，是一个list集合QueryDao dao = new QueryDao();List<Province> provinces = dao.queryProvinceList();//把上面的list转为json格式的数据,输出给ajax的请求if (provinces != null){//调用jackson工具库，将provinces转为json对象ObjectMapper om = new ObjectMapper();json = om.writeValueAsString(provinces);}//输出json格式的数据，响应ajax的请求response.setContentType("application/json;charset=utf-8");PrintWriter out = response.getWriter();out.println(provinces);out.flush();out.close();}
}

在这里插入图片描述

p37-40p/41p 级联查询change事件绑定

如何知道点击的是哪个省份？
通过jQuery的change事件

注意在dom对象加载完毕的时候就发起一次ajax请求

p41p/41p 补充文档总结

在这里插入图片描述

对象分类【dom对象和jQuery对象】
选择器【基本选择器和表单选择器】
过滤器【基本过滤器和表单属性过滤器】
函数
事件绑定的两种方式【一、jQuery对象名.事件名称(事件处理函数)二、jQuery.on(事件名称，function(){事件处理})】
jQuery处理ajax请求使用的函数【 $. a j a x (),$ .post(),$.get()】