jQuery入门到精通全套完整版
思维导图
p1/41p $是函数名
jQuery封装了javascript的方法调用，简化了javascript对HTML DOM操作
<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的第一个例子
<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对象
<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对象
<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 基本选择器，全部选择器，混合选择器使用
<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的divdiv><br>
<div class="two">我是class=two的divdiv><br>
<div>我是没有id，class的divdiv><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 表单选择器
<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 常用函数第一组
<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>
<br>
<br>
<br>
<br>
<p>文本数据textp>
<div>我是第一个divdiv>
<div>我是第二个divdiv>
<div>我是第三个divdiv>
<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 常用函数第二组前三个
<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("");
//此处可以增加很多内容，比如表格。
})
})
//获取第一个span的文本内容
$(function(){
$("#btn4").click(function(){
alert($("span").html());
})
})
//获取第一个span的html内容
$(function(){
$("#btn5").click(function(){
alert($("span").text());
})
})
//设置所有的span的值
$(function(){
$("#btn6").click(function(){
$("span").html("我是新数据数据");
})
})
script>
<style>
div{
background:blue;
}
style>
head>
<body>
<p>show\hidep>
<div>我是onediv>
<div>我是twodiv>
<br>
<p>remove/emptyp>
<select>
<option >java语言option>
<option >go语言option>
<option >sql语言option>
select>
<br>
<p>appendp>
<div id="father" style="background:red">我是父亲div>
<br>
<p>htmlp>
<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 ( ) , .ajax(), .ajax(),.post(),$.get()】