jquery学习笔记

一、介绍
jQuery是JS的库，库：相当于java的工具类。jQuery是存放JS代码的，放的是用JS代码写的函数。是为了简化JavaScript对HTML Dom的操作。
JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。
jQuery 是一个兼容多浏览器的 javascript 库，核心理念是 write less,do more(写得更少,做得更多)。
二、第一个例子

<html><head></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">if($!= undefined ){ alert("success")console.log("yes")} //$是jQuery中的函数名称，document是函数的参数，作用是把domcument对象变成jQuery函数库可以使用的对象//ready是jQuery中的函数，当页面的document对象加载成功后会执行ready函数的内容，相当于onload事件//function是自定义函数，来表示onload后执行的代码。$(document).ready(function () {alert("hello Kero")})</script></body>
</html>

//简化方式，等价
$(function(){
alert(“hello Kero2”)
})
dom对象和jQuery对象：
dom对象：使用JS语法创建的对象叫做dom对象，也就是JS对象。
var obj = document.getElementById(“xx”),obj就是dom对象。
jQuery对象：使用jQuery语法表示对象叫做jQuery对象，注意，jQuery表示的对象都是数组。
如：var jobj = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx") jobj 就是jQ…(dom对象)
jQuery转化为dom：语法：从数组中获取第一个对象，第一个对象就是dom对象，使用【0】或get(0).
进行转换是为了要使用对象的方法或者属性。当你是dom对象，你可以使用dom对象的方法、属性，你想用jQuery提供的函数，必须是jQuery对象才行。
例子：

<html><head></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">//dom转为jQueryfunction btnclick(){//获取dom对象var obj = document.getElementById("btn")alert("使用dom对象属性="+obj.value)//把dom转为jQuery，目的是使用jQuery中的函数var $jobj=$(obj);//调用jQuery中的函数，获取值alert("使用jQuery对象属性="+$jobj.val())}</script><input type="button" value="小可1"  id="btn" onclick="btnclick()"></body>
</html>
<html><head></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">function btnclick(){//使用jQuery的语法获取页面中dom对象//var obj = $("#txt")[0];//从数组中获取下标是0的dom对象var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象// alert(obj.value)var num = obj.value;obj.value = num*num;}</script><div><input type="button" value="计算平方"  id="btn" onclick="btnclick()"><br><input type="text" id="txt" value="整数"></div></body>
</html>

三、基本选择器使用
选择器：是字符串，用来定位当面页面的dom对象，是jQuery的核心。定位了dom对象，就可以通过jQuery操作dom对象。
常用的选择器：1、id选择器，语法：KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dom对象的id值") 通过d…(".class样式名")，class表示css中的样式，使用样式的名称定位dom对象的
3、标签选择器，语法：("标签名称")，使用标签名称定位dom对象的。4、所有选择器，语法：("标签名称")，使用标签名称定位dom对象的。 4、所有选择器，语法：("标签名称")，使用标签名称定位dom对象的。4、所有选择器，语法：("*"),选取页面中所有dom对象
5、组合选择器：语法：$("#id,class,标签名")

<html><head><style type="text/css">div{background: gray;width: 200px;height: 100px;}</style></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">function fun1(){//id选择器var obj=$("#one");//使用jQuery中改变样式的函数obj.css("background","red");}function fun2(){//class选择器var obj=$(".two");//使用jQuery中改变样式的函数obj.css("background","yellow");}function fun3(){//标签选择器var obj=$("div");//数组有三个对象//使用jQuery中改变样式的函数//jquery操作都是操作数组中的全部成员。所以是给所有div都设置了背景色obj.css("background","blue");}function fun4(){//全部选择器var obj=$("*");//数组有三个对象//使用jQuery中改变样式的函数obj.css("background","green");}function fun5(){//组合选择器var obj=$("#one,span");//数组有三个对象//使用jQuery中改变样式的函数obj.css("background","black");}</script><div id="one">我是第一个div </div><br><div class="two">我是class的div</div><br><div>没有class和id的div</div><br><span>我是span标签</span><br><input type="button" value="获取id是one1的dom对象" onclick="fun1()"><input type="button" value="使用class样式获取dom对象" onclick="fun2()"><input type="button" value="使用标签获取dom对象" onclick="fun3()"><input type="button" value="使用全部选择器获取dom对象" onclick="fun4()"><input type="button" value="使用组合选择器获取dom对象" onclick="fun5()"></body>
</html>

6、表单选择器，语法：(":type属性值")，使用<input>标签的type属性值，定位dom对象的方法。例如：(":type 属性值")，使用<input>标签的type属性值，定位dom对象的方法。例如：(":type属性值")，使用<input>标签的type属性值，定位dom对象的方法。例如：(":text")选取所有单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
tr不行，tr不是input标签。

<html><head><style type="text/css"></style></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">function fun1(){//表单选择器var obj=$(":text");//获取valuealert(obj.val());}function fun2(){//表单选择器var obj=$(":radio");//有两个对象。//获取value//循环数组，可以用dom的属性或函数for(var i=0 ; i<obj.length;i++){var dom= obj[i];alert(dom.value)}}function fun3(){//表单选择器var obj=$(":checkbox");for(var i=0;i<obj.length;i++){var dom =obj[i];alert(dom.value);}}</script><input  type="text" value="我是type= text"><br><input type="radio" value="man">男<br><input type="radio" value="woman">女<br><input type="checkbox" value="bike">骑行<br><input type="checkbox" value="bike2">骑行2<br><input type="checkbox" value="bike3">骑行3<br><input type="button" value="读取text的值" onclick="fun1()"><input type="button" value="读取radio的值" onclick="fun2()"><input type="button" value="读取checkbox的值" onclick="fun3()"></body>
</html>

四、过滤器
在定位了dom对象后，根据一些条件筛选dom对象，过滤器也是一个字符串，不能单独使用，要和选择器一起使用。
1、选择第一个first，保留数组中第一个dom对象
语法：("选择器：first")2、选择最后一个last，保留数组中最后dom对象语法：("选择器：first") 2、选择最后一个last，保留数组中最后dom对象语法：("选择器：first")2、选择最后一个last，保留数组中最后dom对象语法：(“选择器：last”)
3、选择数组中指定对象
语法：("选择器：eq(数组索引)")4、选择数组中小于指定索引的所有dom对象语法：("选择器：eq(数组索引)") 4、选择数组中小于指定索引的所有dom对象语法：("选择器：eq(数组索引)")4、选择数组中小于指定索引的所有dom对象语法：(“选择器：lt(数组索引)”)
5、选择数组中大于指定索引的所有dom对象
语法：$(“选择器：gt(数组索引)”)

<html><head><style type="text/css">div{background: gray;}</style></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">//$(document).ready：当页面中的dom对象加载成功后会执行ready（），相当于onload事件$(function () {//当页面dom对象加载后，给对象绑定事件，因为此时button对象已经在内存中创建好了，才能使用。

       $("#btn1").click(function(){//过滤器var obj=$("div:first");obj.css("background","red");})//绑定事件$("#btn2").click(function(){//过滤器var obj=$("div:last");obj.css("background","green");})$("#btn3").click(function(){//过滤器var obj=$("div:eq(3)");obj.css("background","blue");})$("#btn4").click(function(){//过滤器var obj=$("div:lt(3)");obj.css("background","orange");})$("#btn5").click(function(){//过滤器var obj=$("div:gt(3)");obj.css("background","gold");})})</script><div id="one" >我是div1</div><div id="two" >我是div2</div><div >我是div3<div  >我是div4</div><div  >我是div5</div></div><div>我是div6</div><br><span>我是span</span><input type="button" value="获取第一个div" id="btn1" ><input type="button" value="获取最后一个div" id="btn2" ><input type="button" value="获取下标等于3的div" id="btn3" ><input type="button" value="获取下标小于3的div" id="btn4" ><input type="button" value="获取下标大于3的div" id="btn5" ></body>
</html>

表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象。
1、选择可用的文本框：("：text:enabled")2、选择不可用的文本框：("：text:enabled") 2、选择不可用的文本框：("：text:enabled")2、选择不可用的文本框：(":text:disabled")
3、复选框选中的元素：$(":checkbox:checked")
4、选择指定下拉列表的被选中元素：选择器>option：selected

五、事件
jQuery给dom对象绑定事件：
1、$(选择器).事件名称（事件处理函数）
$(选择器)：定位dom对象，可以有多个，这些dom对象都绑定事件了。
事件名称：就是js中事件去掉on的部分，例如：js中的单击事件是onclick（），jQuery中的事件名称就是click。
事件的处理函数：就是一个function，当事件发生时，会执行这个函数的内容。
例如给id是btn的按钮绑定单击事件。
$("#btn").click(function(){
alert(“btn按钮被单击了”)
})

2、on绑定事件:
$(选择器）.on(事件名称，事件处理函数)
事件名称：就是js事件中去掉on的部分。

$("#btn").on(“click”,function(){
处理函数语句。
})

六、函数
1、val:操作数组中dom对象的value属性。
$(选择器).val():无参数调用形式，读取数组中第一个dom对象的value属性值。
$(选择器).val(值)：有参形式调用，对数组中所有dom对象的value属性值进行统一赋值。
2、text:操作数组中所有dom对象的文字显示内容属性
$(选择器).text（）无参数调用，读取数组中所有dom对象的文字显示内容，将得到内容拼接为一个字符串返回。
$(选择器).text(值)：有参数调用，对数组中所有dom对象的文字显示内容进行统一赋值。
3、attr：对val,text之外的其他属性操作
$(选择器).attr(“属性名”)：获取dom数组第一个对象的属性值
$(选择器).attr(“属性名”，”值“)：对数组中所有dom对象的属性设为新值

<html><head><style type="text/css">div{background: blue;}</style></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">//在dom对象创建好后绑定事件$(function(){$("#btn1").click(function(){//val获取dom数组中第一个对象的value属性值var text=$(":text").val();alert(text)})$("#btn2").click(function(){//设置所有的text的value为新值var text=$(":text").val("Kero");})$("#btn3").click(function(){//获取divvar text=$("div").text();alert(text)})$("#btn4").click(function(){var text=$("div").text("小可最可爱");})$("#btn5").click(function(){var text=$("img").attr("src");alert(text)})$("#btn6").click(function(){var text=$("img").attr("src","2.jpg");alert(text)})})</script><input type="text" value="小可" ><br><input type="text" value="阿梓" ><br><input type="text" value="七海" ><br><div>我是第一个div</div><div>我是第二个div</div><div>我是第三个div</div><br><img src="1.jpg" id="xiaoke"><br><input type="button" value="获取第一个文本框的值" id="btn1"><input type="button" value="给所有文本框赋新值" id="btn2"><input type="button" value="获取div的所有文本" id="btn3"><input type="button" value="设置div文本值" id="btn4"><input type="button" value="读取src属性的值" id="btn5"><input type="button" value="设置指定属性值" id="btn6"></body>
</html>

1、remove():
$(选择器).remove():将数组中所有dom对象及其子对象一并删除
2、empty（）：
$(选择器).empty():将数组中所有dom对象的子对象删除
3、append():
$(选择器).append(“

动态添加的div

”),为数组中所有dom对象添加子对象。
4、html()：
设置或返回被选元素的内容（innerHTML）
$(选择器).html()：无参数调用方法，获取dom数组第一个元素的内容
$(选择器).html(值)：有参数调用方法，用于设置dom对象中所有元素的内容

<html><head><style type="text/css">div{background: blue;}</style></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">//在dom对象创建好后绑定事件$(function(){$("#btn1").click(function(){//使用remove删除父和子所有的dom对象$("select").remove();})$("#btn2").click(function(){//使用remove删除父和子所有的dom对象$("select").empty();})$("#btn3").click(function(){//使用append增加dom对象$("#father").append("<input type = 'button' value ='增加的按钮'>");})$("#btn4").click(function(){//使用html函数获取数组中第一个dom对象的文本值alert($("span").html());})$("#btn5").click(function(){$("span").html("我是新的<b>可可音</b>");})})</script><select><option value="小可">小可</option><option value="阿梓">阿梓</option><option value="七海">七海</option></select>
<br><select><option value="小可1">小可1</option><option value="阿梓1">阿梓1</option><option value="七海1">七海1</option></select><br><div id="father">我是一个div</div><br><span>我是大大<b>可</b></span><br><span>我是小小<b>可</b></span><br><input type="button" value="使用remove删除所有对象" id="btn1"><input type="button" value="使用empty删除子对象" id="btn2"><input type="button" value="增加一个子dom对象" id="btn3"><input type="button" value="获取第一个dom的文本值" id="btn4"><input type="button" value="设置span的所有dom的值" id="btn5"></body>
</html>

5、each（）：
each是对数组，json和dom数组等的遍历，对每个元素调用一次函数。
语法1：$.each(要遍历的对象，function（index，element) {处理程序}
语法2：jQuery对象.each(function(index,element) {处理程序}
index:数组的下标。element：数组的对象

<html><head><style type="text/css">div{background: blue;}</style></head><body><script src="jquery -3.6.0.js"></script><script type="text/javascript">//在dom对象创建好后绑定事件$(function(){$("#btn1").click(function(){//使用remove删除父和子所有的dom对象$("select").remove();})$("#btn2").click(function(){//使用remove删除父和子所有的dom对象$("select").empty();})$("#btn3").click(function(){//使用append增加dom对象$("#father").append("<input type = 'button' value ='增加的按钮'>");})$("#btn4").click(function(){//使用html函数获取数组中第一个dom对象的文本值alert($("span").html());})$("#btn5").click(function(){$("span").html("我是新的<b>可可音</b>");})$("#btn6").click(function(){//循环非dom数组var arr=[1,2,3];$.each(arr,function(index,element){alert("love")})})$("#btn7").click(function(){//循环json数组var json ={"name":"小可","age":16};$.each(json,function(i,n){alert("i是key="+i+",n是值="+n);})})$("#btn8").click(function(){//循环dom数组var  domArray =$(":text");//dom数组$.each(domArray,function(i,n){alert("i="+i+",n="+n.value);})})$("#btn9").click(function(){$(":text").each(function(i,n){alert("i="+i+",n="+n.value);})})})</script><input type="text" value="大可"><input type="text" value="大可1"><input type="text" value="大可2"><br><select><option value="小可">小可</option><option value="阿梓">阿梓</option><option value="七海">七海</option></select>
<br><select><option value="小可1">小可1</option><option value="阿梓1">阿梓1</option><option value="七海1">七海1</option></select><br><div id="father">我是一个div</div><br><span>我是大大<b>可</b></span><br><span>我是小小<b>可</b></span><br><input type="button" value="使用remove删除所有对象" id="btn1"><input type="button" value="使用empty删除子对象" id="btn2"><input type="button" value="增加一个子dom对象" id="btn3"><input type="button" value="获取第一个dom的文本值" id="btn4"><input type="button" value="设置span的所有dom的值" id="btn5"><input type="button" value="循环普通数组" id="btn6"><input type="button" value="循环json数组" id="btn7"><input type="button" value="循环dom数组" id="btn8"><input type="button" value="循环jquery对象" id="btn9"></body>
</html>

七、Ajax
使用jQuery中的函数实现ajax请求的处理。
没有jQuery之前是用XMLHttpRequest做ajax，有四个步骤，jQuery简化了Ajax请求的处理。使用三个函数可用实现ajax请求的处理。
1、.ajax():是jQuery中实现ajax的核心函数。2、.ajax():是jQuery中实现ajax的核心函数。 2、.ajax():是jQuery中实现ajax的核心函数。2、.post():使用post方式做ajax请求
3、$.get()：使用get方式发送ajax请求
.post()和.post()和.post()和.get()在内部都是调用的$.ajax();
$.ajax()的使用：
函数的参数表示请求的url，请求的方式，参数值等信息。
.ajax()参数是一个json结构。例如：.ajax()参数是一个json结构。例如：.ajax()参数是一个json结构。例如：.ajax({名称1：值1，名称2：值2，…})

$.ajax({async:true ,
contextType:"application/json"，data:{"name":"xiaoke","age":16 }dataType:"json"，
error：function（）{
请求出现错误时执行的函数
}。
success：function（data）{
//data是responseText，是jQuery处理后的一个数据
}，
url:“xxx”,
type:"get"} )

json结构的参数说明：
1、async：是布尔类型，默认是true，表示异步请求。可以不写这个配置项
false表示同步请求。
2、contextType：一个字符串，表示从浏览器发送服务器的参数的类型，可以不写。
例如你想表示请求的参数是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、success：是一个function，请求成功了，从服务器端返回了数据，会执行success指定的函数。之前使用XMLHttpRequest对象，当readyState==4&&status ==200的时候
7、url:请求的地址
8、type:请求的方式，get或者是post。
url,data,dataType,success重点。

jquery学习笔记相关推荐

jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素参数:expr(字符串,一个查询表达式或一段html字符串 ...
jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...

jquery学习笔记

jquery学习笔记相关推荐

最新文章

热门文章