jQuery基础学习
程序员文章站
2022-04-29 14:12:10
...
jQuery基础学习
1.jQuery的定义：
jQuery是对javaScipt的封装，他是免费，开源的javaScript函数库，jQuery极大的简化了JavaScript编程；
2.jQuery的作用：
jQuery和JavaScript作用一样，都是负责网络行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更好；
3.jQuery的优点：
jQuery兼容了现在主流的浏览器，增加了程序员的开发效率；
jQuery简化了JavaScript编程，代码编写更加简单；
4.jQuery的引用：
<script src="./jquery-1.12.4.min.js"></script>
jQuery的入口函数：
我们知道使用js获取标签元素，需要页面加载完成以后在获取，我们通过使用onload事件来获取标签元素，而jQuery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的window.onload更快。
jQuery入口函数的两种写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导入jQuery文件 -->
<script src="./jquery-1.12.4.min.js"></script>
<!-- 2.入口函数 -->
<script>
// // 原生写法的js
// window.onload = function(){
// var oDiv = document.getElementById("mydiv");
// alert(oDiv);
// }
// jQuery获取标签的方式(完整写法)
// $(document).ready(function(){
// // jQuery获取标签的方式和css中是一样的
// var $mydiv = $("#mydiv");
// alert($mydiv);
// })
// jQuery获取标签的方式(简化写法)
$(function(){
// jQuery获取标签的方式和css中是一样的
var $mydiv = $("#mydiv");
alert($mydiv);
})
</script>
</head>
<body>
<div id = "mydiv">小廖同学</div>
</body>
</html>
5.jQuery选择器：
1.标签选择器：根据标签名来选择标签
2.类选择器：根据类名选择标签
3.id选择器：根据id选择标签
4.层级选择器：根据层级关系选择标签
5.属性选择器：根据属性名来选择标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- css标签选择器,既可以选择标签，还可以添加样式 -->
<!-- <style>
p{
width: 100px;
height: 100px;
background: red;
}
</style> -->
<script src="jquery-1.12.4.min.js"></script>
<script>
// 1.标签选择器,根据标签名来选择标签
// $(function(){
// var $myp = $("p");
// // 验证是否选择标签
// alert($myp.length);
// })
// 2.类选择器，根据类名来选择标签
// $(function(){
// var $mydiv = $(".mydiv");
// // 验证是否选择标签
// alert($mydiv.length);
// })
// 3.id选择器，根据id选择标签
// $(function(){
// var $myid = $("#myid");
// // 验证是否选择标签
// alert($myid.length);
// })
// 4.层级选择器，根据层级关系来选择标签
// $(function(){
// var $myc = $("div div p");
// // 验证是否选择标签
// alert($myc.length);
// })
// 5.属性选择器，根据属性名来选择标签
$(function(){
var $mylei = $("input[type=text]");
// 验证是否选择标签
alert($mylei.length);
})
</script>
</head>
<body>
<p>小廖同学</p>
<p>小廖同学</p>
<div class="mydiv">小廖同学</div>
<div id="myid">小廖同学</div>
<div>
<div>
<p>小廖同学</p>
<p>小廖同学</p>
</div>
</div>
<input type="button" value="按钮">
<input type="text" value="">
</body>
</html>
6.选择集过滤：
选择集过滤：选择标签的集合中过滤自己需要的标签；
方法：
1.has(选择名称)方法，表示选取包含指定选择器的标签；
2.eq(索引)方法，表示选取指定索引的标签；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取到标签
var $mybtn = $("div");
// 进行样式修改
$mybtn.css({"height":"100px", background:"green"});
// has方法
$mybtn.has("#btn").css({background:"yellow"});
// eq方法(从获取到的标签中选择)
$mybtn.eq(1).css({background:"red"})
})
</script>
</head>
<body>
<div>
<input type="button" value="小廖同学" id = "btn">
</div>
<div>
<input type="button" value="xlz" class = "btn">
</div>
</body>
</html>
8.选择集转移：
选择集转移：以选择的标签为参照，然后获取转移后的标签；
选择集转移操作：
- $(’#box’).prev(); 表示选择id是box元素的上一个的同级元素
- $(’#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
- $(’#box’).next(); 表示选择id是box元素的下一个的同级元素
- $(’#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
- $(’#box’).parent(); 表示选择id是box元素的父元素
- $(’#box’).children(); 表示选择id是box元素的所有子元素
- $(’#box’).siblings(); 表示选择id是box元素的其它同级元素
- $(’#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签对象
var $mydiv = $("#div");
// prev(); 表示选择id是box元素的上一个的同级元素
// $mydiv.prev().css({color:"red"});
// $('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
// $mydiv.prevAll().css({color:"green"});
// $('#box').next(); 表示选择id是box元素的下一个的同级元素
// $mydiv.next().css({color:"red"});
// $('#box').nextall(); 表示选择id是box元素的下面所有的同级元素
// $mydiv.nextAll().css({color:"green"});
// $('#box').parent(); 表示选择id是box元素的父元素
// $mydiv.parent().css({color:"red"});
// $('#box').children(); 表示选择id是box元素的所有子元素
// $mydiv.children().css({color:"red"});
// $('#box').siblings(); 表示选择id是box元素的其它同级元素
// 不包括它自己
// $mydiv.siblings().css({color:"red"});
// $('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素
$mydiv.find('#btn').css({color:"red"});
})
</script>
</head>
<body>
<h2>这是第一个h2标签</h2>
<p>这是一个段落</p>
<div id ="div">
这是一个容器
<span class="span">小廖同学</span>
<h2 id = "btn">这是第二个h2标签</h2>
<p>这是第二个段落标签</p>
</div>
<p>小廖同学1</p>
<p>小廖同学2</p>
</body>
</html>
9.获取和设置元素内容：
html方法可以获取和设置元素内容；
append方法可以追加元素内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签
var $myp = $("p");
alert($myp);
// 获取标签中的内容
var $result = $myp.html();
alert($result);
// 修改标签中的内容
$myp.html("小廖子");
// 追加新的内容：
$myp.append("是个优秀的程序员")
})
</script>
</head>
<body>
<p>小廖同学</p>
</body>
</html>
10.获取和修改元素属性：
获取和修改标签样式：使用css方法；
获取和设置标签属性：使用prop方法；
获取和设置元素的value属性：使用val方法；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 标签样式 -->
<style>
p{
width: 100px;
height: 100px;
background: red;
font-size: 20px;
}
</style>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签对象
var $myp = $("p");
// 获取标签样式
var $mypx = $myp.css("font-size");
alert($mypx);
// 设置标签样式
$myp.css({"font-size":"30px"});
// 获取标签对象
var $mybtn = $("input");
// 获取标签属性
var $mytype = $mybtn.prop("type");
alert($mytype);
// 设置标签属性
// $mybtn.prop({"value":"name"});
$mybtn.val("小廖同学");
})
</script>
</head>
<body>
<p>小廖同学</p>
<!-- 标签属性 -->
<input type="button" value="按钮" id = "mybtn">
</body>
</html>
11.jQuery事件：
常用的jQuer事件：
click()：鼠标单击；
blur()：元素失去焦点；
focus()：元素获取焦点；
mouseover()：鼠标进入；
mouseout()：鼠标离开；
ready()：DOM加载完成；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
<script>
// ready()：DOM加载完成;
// $(document).ready(function(){
// })
// 简化写法
$(function(){
// 获取标签对象
var $mytext = $("#text1");
var $mybtn = $("#btn");
// click()：鼠标单击
// $mybtn.click(function(){
// alert("小廖同学");
// });
// focus()：元素获取焦点；
$mytext.focus(function(){
// 原生ji写法
// this.style.background="red";
// jQuery写法
$(this).css({"background":"red"});
});
// blur()：元素失去焦点；
$mytext.blur(function(){
$(this).css({"background":"white"})
});
// mouseover()：鼠标进入；
var $mydiv = $("div #text2");
$mydiv.mousemove(function(){
$(this).css({"background":"red"});
});
// mouseout()：鼠标离开；
$mydiv.mouseout(function(){
$(this).css({"background":"white"});
});
})
</script>
</head>
<body>
<input type="text" id="text1">
<input type="button" value="按钮" id="btn">
<div>
<input type="text" id="text2">
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>
事件代理：事件代理就是利用事件冒泡的原理（事件冒泡就是事件会向它的父级一级一级传递），把事件加在父级上通过判断事件来源，执行相应的子元素的操作；
事件代理的好处：事件代理首先可以极大减少事件绑定次数，提高性能，其次可以让新加入的子元素也可以拥有相同的操作；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取标签对象
var $mydiv1 = $("#div1");
var $mydiv2 = $("#div2");
// 绑定对象
$mydiv1.click(function(){
alert("div1 父标签");
});
$mydiv2.click(function(){
alert("div2 子标签");
});
})
</script>
</head>
<body>
<div id="div1" style="width: 1oopx;height: 100px; background: red;">
小廖同学
<div id="div2" style="background: green">
小廖同学
</div>
</div>
</body>
</html>
事件代理的使用：
delegate方法参数说明:
delegate(childSelector,event,function)
- childSelector: 子元素的选择器
- event: 事件名称，比如: ‘click’
- function: 当事件触发执行的函数
事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能；
使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理；
事件代理使用是使用delegate方法来完成；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 没有事件代理的写法
// 获取所有的li标签对象
// var $mylist = $("ul li");
// alert($mylist.length);
// 绑定5次事件
// $mylist.click(function(){
// $(this).css({"background":"red"});
// });
// 事件代理的使用
// 获取父标签对象
var $mylist = $("#ul");
alert($mylist.length);
$mylist.delegate("#li","click",function(){
// this指的是触发事件的子标签
$(this).css({"background":"red"});
});
})
</script>
</head>
<body>
<ul id="ul">
<li id="li">小廖同学1</li>
<li id="li">小廖同学2</li>
<li id="li">小廖同学3</li>
<li>小廖同学4</li>
<li>小廖同学5</li>
</ul>
</body>
</html>
12.JavaScript对象：
javaScript对象介绍：JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。
创建自定义javascript对象有两种方式:
- 通过*Object类型来实例化一个对象
- 通过对象字面量创建一个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 通过*Object类型来实例化一个对象
var oPersion = new Object();
// 添加属性
oPersion.age = 20;
oPersion.name = "小廖同学";
// 添加方法
oPersion.show = function(){
alert("小廖同学是一个优秀的程序员");
};
// 调用方法和属性
alert(oPersion.name + oPersion.age);
oPersion.show();
// 通过对象字面量创建一个对象
var oStudent = {
name:"小廖同学",
age:20,
show:function(){
alert("小廖同学是一个优秀的程序员");
}
}
//调用方法和属性
alert(oStudent.name + oStudent.age);
oStudent.show();
</script>
</head>
<body>
</body>
</html>
13.josn（重点）:
json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种轻量级的数据交换格式，采用完全独立于编程，易于人阅读和编写，同于也易于机器解析和生成，并有效地提升网络传输效率，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。
json有两种格式：
- 对象格式
- 数组格式
对象格式:
对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，key
和value必须用双引号引起来，用单引号或者不用引号会导致数据错误，多个键值对使用逗号分隔。
数组格式：
数组格式的JSON数据，使用一对中括号（[]）,中括号里面的数据用逗号隔开；
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 对象格式的json数据
var sJson1 = '{"name":"小廖子", "age":20}'
// 数组格式的json数据
var sJson2 = '[{"name":"小廖子", "age":20},{"name":"小廖同学","age":20}]'
// 浏览器获取对象格式的json数据转换成JavaScript对象
var oPersion = JSON.parse(sJson1);
console.log(oPersion);
// 浏览器获取数组格式的json数据转换为数组
var aArray = JSON.parse(sJson2);
console.log(aArray);
// 服务器获取对象格式的json数据转换为字典，数组格式的json数据转换为列表
</script>
</head>
<body>
</body>
</html>
14.ajax（重点）：
ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。
.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
-
url 请求地址
-
data 设置发送给服务器的数据，没有参数不需要设置
-
type 请求方式，默认是"get"，常用的还有"post"
-
success 设置请求成功后的回调函数
- data 请求的结果数据
- status 请求的状态信息, 比如: “success”
- xhr 底层发送http请求XMLHttpRequest对象
-
dataType 设置返回的数据格式
“xml”，“html”，“text”，“json”
-
error 表示请求失败后的回调函数
func 错误异常回调函数
7.async 设置是否异步，默认值是“true”，表示异步，一般不用写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>天气查询</h1>
<h3>请输入要查询的城市</h3>
<input type="text" id="input-text">
<input type="button" value="查询" onclick="searchWeather()">
<h3>查询结果：</h3>
<ul>
<li>城市：<span id="city"></span></li>
<li>天气：<span id="weather"></span></li>
</ul>
<!--
接口参考网址：'http://doc.tianqiapi.com/603579'
查询天气网址: 'https://www.tianqiapi.com/api/'
-->
<!-- ajax -->
<script src="./jquery-1.12.4.min.js"></script>
<script>
function searchWeather(){
var city = $("#input-text").val();
// alert(city)
$.ajax({
// url 请求地址
url:'https://www.tianqiapi.com/api/',
// type 请求方式，默认是"get"，常用的还有"post"
type:"get",
// dataType 设置返回的数据格式
dataType:"json",
// data 设置发送给服务器的数据，没有参数不需要设置
data:"version=v1&appid=[24253253]&appsecret=[1vb4nCMk]&city="+ city,
// success 设置请求成功后的回调函数
// resp服务器返回的数据
success:function(resp){
$("#city").text(resp.city);
$("#weather").text(resp.data[0].wea);
},
// error 表示请求失败后的回调函数
error:function(){
alert("网络异常")
},
// async 设置是否异步，默认值是“true”，表示异步，一般不用写
async:true
});
};
</script>
</body>
</html>
实践：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 实现页面元素布局 -->
<h3>天气查询</h3>
<input type="text" name="city" id="city-in">
<input type="button" onclick="searchWeather()" value="查询">
<hr>
<h3>查询结果</h3>
<ul>
<li>所在城市: <span id="city"></span> </li>
<li>城市天气: <span id="wea"></span></li>
<li>城市温度: <span id="tem"></span></li>
<li>空气级别: <span id="airlev"></span></li>
<li>风力级别: <span id="wins"></span></li>
<li>出行提示: <span id="tips"></span></li>
</ul>
<script src="./jquery-1.12.4.min.js"></script>
<script>
// 接收数据,为页面更新内容
function setPageData(city,wea,tem,airlev,wins,tips){
$('#city').text(city);
$('#wea').text(wea);
$('#tem').text(tem);
$('#airlev').text(airlev);
$('#wins').text(wins);
$('#tips').text(tips);
};
// 按钮的响应函数,用来发送ajax请求,获取天气信息
function searchWeather(){
var city = $("#city-in").val();
$.ajax({
// url 请求地址
url:'https://www.tianqiapi.com/api/',
// type 请求方式，默认是"get"，常用的还有"post"
type:"get",
// dataType 设置返回的数据格式
dataType:"json",
// data 设置发送给服务器的数据，没有参数不需要设置
data:"version=v1&appid=[24253253]&appsecret=[1vb4nCMk]&city="+ city,
success:function(response){
// 通过返回的解析后的json数据,提取页面需要的数据
var city = response.city;
var wea = response.data[0].wea;
var tem = response.data[0].tem2 + ' ~ ' + response.data[0].tem1;
var airlev = response.data[0].air_level;
var wins = response.data[0].win_speed;
var tips = response.data[0].air_tips;
// 调用函数为页面添加数据
setPageData(city, wea, tem, airlev, wins, tips)
},
error:function(){
alert("网络异常")
// 如果请求失败,页面显示无信息
setPageData('无', '无', '无', '无', '无', '无');},
async:true
});
};
</script>
</body>
</html>
上一篇： JQuery基础学习笔记
下一篇： JQuery基础学习（一）