jQuery+Ajax学习
01-jquery的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 title>
head>
<body>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8" >script>
html>
02-DOM对象和jquery包装集对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom对象和jquery包装集对象title>
head>
<body>
<div id="mydiv">文本div>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
/*Dom对象*/
var divdom = document.getElementById("mydiv");
console.log(divdom);
var divdom = document.getElementsByTagName("div");
console.log(divdom);
//js获取不存在的元素
var spandom = document.getElementsByTagName("span");
console.log(spandom);
var spandom2 = document.getElementById("span");
console.log(spandom2);
console.log("===============");
/*jquery对象*/
//通过id选择器获取元素对象 $("#id属性值")
var divjquery = $("#mydiv");
console.log(divjquery);
//jquery获取不存在的元素
var spanjquery = $("#myspan");
console.log(spanjquery);
console.log("===============");
//dom对象转换为jquery对象
var divdomtojquery = $(divdom);
console.log(divdomtojquery);
//jquery对象转换为dom对象
//获取包装集对象中指定下标的元素,将jquery对象转换为dom对象
var jquerytodom = divjquery[0];
console.log(jquerytodom);
script>
html>
03-基础选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器title>
head>
<body>
<div id="mydiv">id选择器1<span>span中的内容span>div>
<div id="mydiv1" clss="blue">元素选择器div>
<span class="blue">样式选择器span>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//id选择器 #id属性值
var mydiv = $("#mydiv");
console.log(mydiv)
//类选择器 .class属性值
var clas = $(".blue");
console.log(clas)
//元素选择器
var spans = $("span");
console.log(spans)
//通用选择器
var all = $("*");
console.log(all);
//组合选择器
var group = $("#mydiv,div,.blue");
console.log(group);
script>
html>
04层次选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器title>
head>
<body>
<div id="mydiv">id选择器1<span>span中的内容span>div>
<div id="mydiv1" clss="blue">元素选择器div>
<span class="blue">样式选择器span>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//id选择器 #id属性值
var mydiv = $("#mydiv");
console.log(mydiv)
//类选择器 .class属性值
var clas = $(".blue");
console.log(clas)
//元素选择器
var spans = $("span");
console.log(spans)
//通用选择器
var all = $("*");
console.log(all);
//组合选择器
var group = $("#mydiv,div,.blue");
console.log(group);
script>
html>
04-层次选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器title>
head>
<body>
<div id="parent">层次选择器
<div id = "child" class="teacher">父选择去
<div class="gray">子选择器div>
<img src="http://www.baidu.com/img/bd_lojo1.png" width="270" height="129">
<img src="http://www.baidu.com/img/bd_lojo1.png" width="270" height="129">
div>
<div>
选择器2<div>选择器2中的divdiv>
div>
div>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//后代选择器
var hd = $("#parent div")
console.log(hd);
//子代选择器
var zd = $("#parent > div")
console.log(zd);
//相邻选择器
var xl = $("#child + div");
console.log(xl);
//同辈选择器
var tb = $(".gray ~ img");
console.log(td)
script>
html>
05-表单选择器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器title>
head>
<body>
<form id='myform' name="myform" method="post">
<input type = "hidden" name="uno" value="9999" disabled="disabled"/>
姓名:<input type = "text" id = "uname" name="uname" /><br />
密码:<input type="password" id = "upwd" name = "upwd" value = "123456"/><br />
年龄:<input type="radio" name="uage" value="g" checked="checked"/>小屁孩
<input type="radio" name=" uage" value="1"/>你懂得 <br />
爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
<input type="checkbox" name="ufav" value="爬床"/>爬床
<input type="checkbox" name="ufav" value="代码"/>代码<br />
来自:<select id="ufrom" name="ufrom">
<option value="-1" selected="selected">请选择option>
<option value="">北京option>
<option value="1">上海option>
select><br />
简介:<textarea rows="19" cols="30" name="uintro">textarea><br />
头像:<input type="file" /><br />
<input type="image" src="http://www.baidu.com/img/bd logo1.png" width="20" height = "28"/>
<button type="submit" onclick="return checkForm();">提交button>
<button type="reset">重值 button>
form>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//表单选择器
var inputs= $(":input");
console.log(inputs);
//元素选择器
var input2= $("input");
console.log(input2);
var inputs= $(":input");
console.log(inputs);
script>
html>
06-操作元素的属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素的属性title>
head>
<body>
<input type="checkbox" name="ch" checked="checked" id="aa" abc = "aaaa">aa
<input type="checkbox" name="ch" id="bb">bb
body>
<script src="js/-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//获取属性
//固有属性
var name =$("#aa").attr("name");
console.log(name);jquery
var name1 =$("#aa").prop("name");
console.log(name1);
//返回值是bolean的属性（元素设置了属性）
var ck1=$("#aa").attr("checked");//checked
console.log(ck1);
var ck2=$("#aa").prop("checked");//true
console.log(ck2);
//返回值是bolean的属性（元素没有设置了属性）
var ck3=$("#bb").attr("checked");//undefined
console.log(ck3);
var ck4=$("#bb").prop("checked");//false
console.log(ck4);
//自定义属性
var abc1=$("#aa").attr("abc");//值
console.log(abc1);
var abc2=$("#aa").prop("abc");//undefined
console.log(abc2);
//设置属性
//固有属性
$("#aa").attr("value","1");
$("#bb").prop("value","2");
//返回值是boolean的属性
$("#bb").attr("checked","checked");
$("#bb").prop("checked","false");
//自定义属性
$("#aa").attr("ad","as")
$("#aa"),prop("as",1);//此处不能操作
//移除属性
$("#aa").remove("checked");
//总结： 如果属性的类型是boolean（checked,selected,disabled），则使用prop方法，否则使用attr方法
script>
html>
07-操作元素的样式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素的属性title>
head>
<body>
<input type="checkbox" name="ch" checked="checked" id="aa" abc = "aaaa">aa
<input type="checkbox" name="ch" id="bb">bb
body>
<script src="js/-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//获取属性
//固有属性
var name =$("#aa").attr("name");
console.log(name);jquery
var name1 =$("#aa").prop("name");
console.log(name1);
//返回值是bolean的属性（元素设置了属性）
var ck1=$("#aa").attr("checked");//checked
console.log(ck1);
var ck2=$("#aa").prop("checked");//true
console.log(ck2);
//返回值是bolean的属性（元素没有设置了属性）
var ck3=$("#bb").attr("checked");//undefined
console.log(ck3);
var ck4=$("#bb").prop("checked");//false
console.log(ck4);
//自定义属性
var abc1=$("#aa").attr("abc");//值
console.log(abc1);
var abc2=$("#aa").prop("abc");//undefined
console.log(abc2);
//设置属性
//固有属性
$("#aa").attr("value","1");
$("#bb").prop("value","2");
//返回值是boolean的属性
$("#bb").attr("checked","checked");
$("#bb").prop("checked","false");
//自定义属性
$("#aa").attr("ad","as")
$("#aa"),prop("as",1);//此处不能操作
//移除属性
$("#aa").remove("checked");
//总结： 如果属性的类型是boolean（checked,selected,disabled），则使用prop方法，否则使用attr方法
script>
html>
08-操作元素的内容
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作元素的内容title>
head>
<body>
<h3><span>html()和text()⽅法设置元素内容span>h3>
<div id="html">div>
<div id="html2">div>
<div id="text">北京div>
<div id="text2"><h2>北京h2>div>
<input type="text" id="op" name="uname" value="oop" />
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//html("内容") 设置元素的内容 包含html标签(非表单元素)
$("#html").html("fsdfdsfdsafsa
")
$("#html2").html("fsdfdsfdsafsa<")
// html() 获取元素的内容 包含html标签(非表单元素)
var html = $("#html").html();
var html2 = $("#html2").html();
console.log(html)
console.log(html2)
//text() 获取元素的纯文本内容 不识别html标签(非表单元素)
var txt =$("#text").text();
var txt2 = $("#text2").text();
console.log(txt);
console.log(txt2);
//text("内容") 设置元素的纯文本内容 不识别htnl标签(非表单元素)
$("#text").text("fdsfds
")
$("#text2").text("sdfdsfd")
//val("值") 设置元素的值（表单元素）
$("#op").val("今天好天气")
//val() 获取元素的值（表单元素）
var val = $("#op").val();
console.log(val);
script>
html>
09-创建元素和添加元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建元素和添加元素title>
<style type="text/css">
div {
margin: 10px 0px;
}
span{
color: white;
padding: 8px
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
.green{
background-color: green;
}
.pink{
background-color: pink;
}
.gray{
background-color: gray;
}
style>
head>
<body>
<h3>prepend()⽅法前追加内容h3>
<h3>prependTo()⽅法前追加内容h3>
<h3>append()⽅法后追加内容h3>
<h3>appendTo()⽅法后追加内容h3>
<span class="red">男神span>
<span class="blue">偶像span>
<div class="green">
<span >⼩鲜⾁span>
div>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//创建元素
var p = "这是一个p标签
";
console.log(p);
console.log($(p));
/*添加元素*/
//创建元素
//得到指定元素，并在元素的内部最前面之u加
//前追加
var span = "小奶狗"
$(".green").prepend(span);
var span2 = "小狼狗"
$(span2).prependTo($(".green"));
//后追加
var span3 = "小狼狗1"
$(".green").append(span3)
var span4 = "小狼狗321"
$(span4).appendTo($(".green"));
//将已经存在的内容追加到指定元素
$(".green").append($(".red"));//会将原来元素直接剪切设置到指定位置
/*同级追加*/
var sp1 = "女神"
var sp2 = "歌手"
$(".blue").before(sp1);
$(".blue").after(sp2)
script>
html>
10-删除元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
style>
head>
<body>
<h3>删除元素h3>
<span class="green">jquery<a>删除a>span>
<span class="blue">javasespan>
<span class="green">http协议span>
<span class="blue">servletspan>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
//删除元素
$(".green").remove();
//清空元素
$(".blue").empty();
script>
html>
11-遍历元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历元素title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
style>
head>
<body>
<h3>遍历元素 each()h3>
<span class="green">jqueryspan>
<span class="green">javasespan>
<span class="green">http协议span>
<span class="green">servletspan>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript"charset="utf-8";>script>
<script type="text/javascript">
//获取指定元素 并遍历
$(".green").each(function(index,element){//这两个参数用就些啥呢，不用也可以不写
console.log(index);
console.log(element);
console.log(this);
console.log($(this));
});
script>
html>
12-ready加载页面
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ready加载页面title>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript"> //把script写在body的后面就可以避免一些奇怪的问题
//预加载
$(document).ready(function(){
//获取元素
console.log($("#p1"))
});
//预加载的简写版
$(function(){
console.log($("#p1"));
})
script>
head>
<body>
<p id="p1">文本p>
body>
html>
13-绑定事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件title>
head>
<body>
<h3>bind()⽅法绑多个事件h3>
<div id="test" style="cursor:pointer">点击查看名⾔div>
<input id="btntest" type="button" value="点击就不可⽤了" />
<hr>
<button type="button" id="btn1">按钮1button>
<button type="button" id="btn2">按钮2button>
<button type="button" id="btn3">按钮3button>
<button type="button" id="btn4">按钮4button>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
/*
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第⼀个参数：事件的类型
3.相应事件触发的，执⾏的操作
第⼆个参数：函数
* */
/* 绑定单个事件 */
$("#test").bind("click",function(){
console.log("名言");
});
//原生js绑定事件
document.getElementById("test").onclick = function(){
console.log("名言");
}
//直接绑定
$("#btntest").click(function (){
//禁用按钮
console.log(this)
$(this).prop("disabled",true);
});
/* 绑定多个事件 */
//1、同时为多个事件绑定同一个函数
$("#btn1").bind("click mouseout",function(){
console.log("按钮1.。。")
});
// 2、为元素绑定多个事件，并设置对应的函数
$("#btn2").bind("click",function(){
console.log("按钮2点击了")
}).bind("mouseout",function(){
console.log("按钮2移开了")
});
//3、为元素绑定多个事件，并设置对应的函数
$("#btn3").bind({
"click":function(){
console.log("按钮3点击了")
},
"mouseout":function(){
console.log("按钮3移开了")
}
});
//直接绑定 这个最常用的了================
$("#btn4").click(function(){
console.log("按钮4点击了")
}).mouseout(function(){
console.log("按钮4移开了")
})
script>
html>
$.ajax({})的简单使用
先写个data.txt
[
{
"userid":1,
"username":"chr",
"userage":12
}
]
再写个data11.json
[
{
"userid":1,
"username":"chr",
"userage":12
}
]
接下来的就是$.ajax({})的简单使用了
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxtitle>
head>
<body>
<button type="button" id="btn">查询数据button>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$.ajax({
type:"get",//请求方式
url:"js/data.txt",//请求的地址
data:{//请求数据，json对象
uanme:"adf"//如果没有参数则不需要设置
},
//请求成功时，调用的函数
success:function(data){//此处data是形参名，代表的是返回的数据
console.log(data);
//将字符串转换json对象
var obj = JSON.parse(data);
console.log(obj);
}
});
//点击按钮，发送ajax请求，将数据显示在页面中
$("#btn").click(function(){
$.ajax({
type:"get",//请求方式
url:"js/data.txt",//请求的地址
data:{//请求数据，json对象
uanme:"adf"//如果没有参数则不需要设置
},
dataType:"json",
//请求成功时，调用的函数
success:function(data11){//此处data是形参名，代表的是返回的数据
console.log(data11);
//将字符串转换json对象
//var obj = JSON.parse(data);
//console.log(obj);
//Dom操作
//创建一个ul
var ul = $("
");
//遍历返回的数组
for(var i=0;i<data11.length;i++){
//得到数组中的每一个元素
var user = data11[i];
//创建li元素
var li = "" +user.username+"";
//将li元素设置到ul元素中
ul.append(li);
}
console.log(ul);
//将ul设置到body标签中
$("body").append(ul);
}
});
});
script>
html>
. g e t 和 .get和 .get和.post
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.get()和$.post()title>
head>
<body>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$.get("js/data11.json",{},function(data11){
console.log(data11);
});
$.post("js/data11.json",{},function(data11){
console.log(data11);
});
script>
html>
$.getJSON
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.getJSONtitle>
head>
<body>
body>
<script src="js/jquery-3.7.0.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
$.getJSON("js/data11.json",{},function(d){
console.log(d);
});
$.get("js/t.txt",{},function(d){
console.log(d);
});
//如果返回的数据不是json格式的则无法获取
// $.getJSON("js/t.txt",{},function(d){
// console.log(d);
// });
script>
html>