jQuery基础
jQuery基础
jquery是一个JS库, 封装了相关方法, 简化DOM操作
jquery基础介绍
1.理解:简化过程:jquery的由来
1.原始DOM操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//单机按钮获取文本框的value值
function fun1() {
var obj = document.getElementById("txt1");
alert(obj.value)
}
//单机按钮获取文本框的value值
function fun2() {
var obj = document.getElementById("txt2");
alert(obj.value)
}
</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>
2.简化过程一:封装方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//单机按钮获取文本框的value值
function fun1(){
var obj = getDomObj("txt1");
alert(obj.value);
}
//单机按钮获取文本框的value值
function fun2() {
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>
3.简化方式二:变量命名a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//单机按钮获取文本框的value值
function fun1(){
var obj = a("txt1");
alert(obj.value);
}
//单机按钮获取文本框的value值
function fun2() {
var obj = a("txt2");
alert(obj.value)
}
//封装方法
function a(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>
4.简化方式三:变量命名$
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//单机按钮获取文本框的value值
function fun1(){
var obj = $("txt1");
alert(obj.value);
}
//单机按钮获取文本框的value值
function fun2() {
var obj = $("txt2");
alert(obj.value)
}
//封装方法
function $(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>
2.下载
https://jquery.com/
压缩版(项目上线时使用的版本)
非压缩版(开发过程中使用版本)
3.使用步骤
1.导入jquery的库文件到项目js文件夹中
2.在页面中引入jquery库的路径才能使用
4.jquery页面初始化
//$是jquery中的函数名, document是函数的参数, 作用是将document对象变成jquery库可以使用的对象
//ready:是jquery库的函数相当于onLoad事件
//页面初始化(完整的)
$(document).ready(function () {
alert("页面初始化了");
});
//页面初始化(简洁版)
$(function () {
alert("页面又被初始化了");
});
5.jquery对象
jquery对象是一个数组, 和dom对象是不同的, 有不同的函数和属性, jquery对象和dom对象可以相互转换
6.dom对象转jquery对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom转jquery</title> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script> function btn(){ var obj = document.getElementById("btn"); alert(obj.value); //dom转成jquery var $obj = $(obj); alert($obj.val()) } </script> </head> <body> <input type="button" value="按钮" id="btn" onclick="btn()"> </body> </html>
7.jquery对象转dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery->dom</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script>
function btn() {
//使用jquery获取dom对象
//方式一:var domObj = $("#txt")[0];
var domObj = $("#txt").get(0);
// alert(domObj.value)
var num = domObj.value;
domObj.value = num * num;
}
</script>
</head>
<body>
<div>
<input type="button" value="计算平方" id="btn" onclick="btn()"/><br>
<input type="text" id="txt" value="整数"/>
</div>
</body>
</html>
8.jquery获取值
| 元素类型 | 非表单 | 表单 |
|---|---|---|
| js获取值 | innerHTML|innerText | value |
| jquery获取值 | html()|text() | val() |
jquery选择器
jquery选择器:定位dom对象
$("#id") == document.getElementById()
$(".类名") == document.getElementsByName()
$("标签名") == document.getElementsByTagname()
1.基础选择器
id选择器用的最多
btnClick() {
alert($("div").html());//标签选择器 标签名
alert($(".class").text());//class选择器 .class
alert($("#id").val());//id选择器 #id
}
2.表单选择器
function fun1(){
//使用表单选择器
var $obj = $(":text");
alert($obj.val());
}
3.全部选择器
var $all = $("*");
4.组合选择器
var $jqueryObj = $("#one,span,.div");
jquery过滤器
1.首尾过滤器
$("选择器:first")//jquery伪数组中第一个dom对象
$("选择器:last")//jquery伪数组中最后一个dom对象
2.奇偶过滤器
一般用于表格行的css设置
$("tr:even")//偶数
$("tr:odd")//奇数
3.比较过滤器
一般用于表格行的css设置
$("tr:eq(5)")//等于5
$("tr:gt(5)//大于5
$("tr:lt(5)//小于5
4.设置属性选择器
[attribute=value]给特定的标签元素设置值(value)
$("input[name='accept']").attr("checked",true);
5.表单对象属性过滤器
选择可用的文本框
$(":text:enabled")
选择不可用的文本框
$(":text:disabled")
选择复选框选中的元素
$(":checkbox:checked")
选择指定下拉列表的被选中元素
选择器>option:selected
jquery事件
动态事件绑定
JS的事件去掉on,动态添加事件,更加灵活
jq 的
$(function(){})也就是$(document).ready(function(){})的简写，与之对应的原生 js 的window.onload事件当dom对象全部加载完毕在执行
$(function () {
//onchange事件
$("#aa").change(function () {
alert("表单改变了");
});
//onclick事件
$("#bb").click(function () {
alert("按钮被点击了");
});
});
$(function (){
$("#btn3").click(function (){
$("td:even").css("background","black")
})
})
on事件绑定
动态的给新添加的Dom对象添加事件
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
例如， <input type="button" id="btn">
$("#btn").on("click", function() { 处理按钮单击 } )
//在dom对象创建好后,绑定事件
$(function(){
$("#btn1").click(function(){
//使用append增加dom对象
$("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
//使用on给按钮绑定事件
$("#newBtn").on("click",function(){
alert("新建的按钮被单击了");
})
})
})
jquery函数
(重要)val()
//获取dom数组中第一个对象的value属性值
var text = $(":text").val();
val("XXX")
//设置所有的text的value为新值
$(":text").val("三国演义");
text()
//获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
var text = $("div").text();
text("XXX")
//设置div的文本值
$("div").text("新的div文本内容");
attr("XXX")
$("#btn5").click(function(){
//读取指定属性的值
alert($("img").attr("src"));
})
attr("XXX","YYY")
$("#btn6").click(function(){
//设置指定属性的,指定值
$("img").attr("src","img/ex2.jpg");
})
remove()
//使用remove:删除父和子所有的dom对象
$("select").remove();
empty()
//使用empty 删除子dom对象
$("select").empty();
(重要)append()
//使用append,增加dom对象
$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
html()(保留标签)
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
alert( $("span").html());
html("XXX")
//使用 html(有参数):设置dom对象的文本值
$("span").html("我是新的<b>数据</b>");
(重要)each()
可以对 数组， json ，dom数组循环处理。 数组， json中的每个成员都会调用一次处理函数。
var arr = { 1, 2, 3} //数组
var json = {"name":"lisi","age":20 }
var obj = $(":text");
语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，
都会执行后面的“处理函数”一次。
$: 相当于是java的一个类名
each:就是类中的静态方法。
静态方法调用，可以使用 类名.方法名称
处理函数:function(index, element) :
index, element都是自定义的形参， 名称自定义。
index：循环的索引
element：数组中的成员
js循环数组：
for(var i=0;i<arr.length;i++){
var item = arr[i]; //数组成员
//操作数组成员
shuchu( i , item);
}
function shuchu(index, emlemnt){
输出index ，element
}
$("#btn6").click(function(){
//循环普通数组,非dom数组
var arr = [ 11, 12, 13];
$.each(arr, function(i,n){
alert("循环变量："+i + "=====数组成员:"+ n);
})
})
$("#btn7").click(function(){
//循环json
var json={"name":"张三","age":20};
//var obj = eval("{'name':'张三','age':20}");
$.each(json,function(i,n){
alert("i是key="+i+",n是值="+n);
})
})
$("#btn8").click(function(){
//循环dom数组
var domArray = $(":text");//dom数组
$.each( domArray, function(i,n){
// n 是数组中的dom对象
alert("i="+i+" , n="+n.value);
})
})
$("#btn9").click(function(){
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function(i,n){
alert("i="+i+"，n="+ n.value);
})
})
循环jquery对象
循环jquery对象， jquery对象就是dom数组
jquery对象.each( function(index,element) {} )
removeAttr()
//移除属性
$(function () {
$("#bb").removeAttr("class");
});
(重点)jquery与Ajax
前端向后端传数据和接收数据
使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax ， 有4个步骤。 jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
1） $.ajax() : jquery中实现ajax的核心函数。
2） $.post() : 使用post方式做ajax请求。
3） $.get() : 使用get方式发送ajax请求。
$.post()和$.get() 他们在内部都是调用的 $.ajax()
介绍 $.ajax函数的使用， 函数的参数表示请求的url， 请求的方式，参数值等信息。
$.ajax()参数是一个json的结构。
例如： $.ajax( {名称:值， 名称1:值1..... } )
例如： $.ajax( { async:true ,
contentType:"application/json" ,
data: {name:"lisi",age:20 },
dataType:"json",
error:function(){
请求出现错误时，执行的函数
},
success:function( data ) {
// data 就是responseText, 是jquery处理后的数据。
},
url:"bmiAjax",
type:"get"
}
)
json结构的参数说明：
1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。
2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的， 可以写application/json
3)data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据
4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
返回你需要的数据格式。
5)error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。
7)url:请求的地址
8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。
主要使用的是 url , data ,dataType, success .
get
$.get(url,[data],[fn],[type])
$.get(地址,参数,回调函数,返回内容格式)
回调函数:前台将数据传到后台成功接收后返回数据,调用函数接收
返回内容格式有json,text...(xml, html, script)
$(function () {
$.get(
"test",
{aa:"1002",bb:"Nancy"},
function (data) {
alert("返回数据:"+data);
},
"text"
);
});
POST
$.post(url,[data],[fn],[type])
$.get(地址,参数,回调函数,返回内容格式)
$(function () {
$.post(
"test",
{aa:"1002",bb:"Nancy"},
function (data) {
alert("返回数据:"+data);
},
"text"
);
});
通用方式
$(function () {
$.ajax( {
type:"get",
url:"test",
data:{aa:"1005",bb:"RRRR"},
dataType:"text",
success:function (data) {
alert("返回数据是："+data);
}
});
});
思维导图
浙公网安备 33010602011771号