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);jqueryvar name1 =$("#aa").prop("name");console.log(name1);//返回值是bolean的属性（元素设置了属性）var ck1=$("#aa").attr("checked");//checkedconsole.log(ck1);var ck2=$("#aa").prop("checked");//trueconsole.log(ck2);//返回值是bolean的属性（元素没有设置了属性）var ck3=$("#bb").attr("checked");//undefinedconsole.log(ck3);var ck4=$("#bb").prop("checked");//falseconsole.log(ck4);//自定义属性var abc1=$("#aa").attr("abc");//值console.log(abc1);var abc2=$("#aa").prop("abc");//undefinedconsole.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);jqueryvar name1 =$("#aa").prop("name");console.log(name1);//返回值是bolean的属性（元素设置了属性）var ck1=$("#aa").attr("checked");//checkedconsole.log(ck1);var ck2=$("#aa").prop("checked");//trueconsole.log(ck2);//返回值是bolean的属性（元素没有设置了属性）var ck3=$("#bb").attr("checked");//undefinedconsole.log(ck3);var ck4=$("#bb").prop("checked");//falseconsole.log(ck4);//自定义属性var abc1=$("#aa").attr("abc");//值console.log(abc1);var abc2=$("#aa").prop("abc");//undefinedconsole.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操作//创建一个ulvar 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>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！