爱站程序员基地1.关于jQuery
什么是jQuery
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在大
量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通
过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。
为什么使用jQuery
非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器
处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX
异步对象。
其他优点：
（1）写少代码,做多事情【write less do more】 （2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX
功能
5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出
错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法
2.jQuery里的对象
DOM对象
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展
标志语言的标准编程接口。通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
JavaScript 对象和 jQuery 对象
用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对
象的 API。 用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，
我们都是将 JavaScript 对象转化成 Jquery 对象
DOM 对象转换 jQuery 对象
使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象， 转换为 jQuery 对象才可以
使用 jQuery 中的提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以$ 开头，这不是必须的。
例：
新建 html 页面文件 domTojQuery.html
1.页面加入按钮 button
<body><div align=\"center\"><input type=\"button\" id=\"btn\" value=\" 我要成为jQuery对象”οnclick=\"btnClick()\"/></div></body>
2.转换 DOM 对象
<script type=\"text/ javascript\" src=\"js/jquery_ 3.4.1.js\"></script><script type=\"text/javascript\">function btnClick(){//使用js方法获取DOM对象var domBtn = document. getElementById(\"btn\");alert(\"1=\" + domBtn. value )//使用jQuery函数$() 把DOM对象转换jQuery对象var $btn == $(domBtn);//调用jQuery方法val()alert(\"2=\" + $btn.val());}</script>
jQuery 对象转为 DOM 对象
jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM
对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]
1.页面添加 text ，button
<body><div align=\"center\"><input type=\"button\" id=\"btn\" value=\"计算平方” οnclick=\"btnClick()\"/><input type=\"text\" id=\"txt\" value=\"输入 整数\"/></div></body>
- jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM 对象
<script type=\"text/ javascript\" src=\"js/jquery_ 3.4.1.js\"></script><script type=\"text/javascript\">function btnClick(){//从jQuery对 象数组中,第0个对象为DOM对象//var domObj 二$(\"#txt\"). get(0);var domObj = $(\"#txt\")[0];//使用DOM对象的属性valuevar num =domObj . value ;dom0bj.value = num * num;}</script>
3.选择器
选择器: 就是定位条件；通知 jquery 函数定位满足条件的 DOM 对象
基本选择器
根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象.
1.id 选择器
语法：$(“#id”)
2.class 选择器
语法：$(“.class 名称”)
3. 标签选择器
语法：$(“标签名”)
例：新建 selector.html
1.在页面 head 部分加入 css
<style type=\"text/css\">div{background: gray;width: 200px;height:100px;}</style>
2.加入 jQuery 引用
<script type=\"text/javascript\" src=\"js/jquery_ 3.4.1.js\"></script>
3.body 部分定义 div
<body><div id=\"one\" >我是id=one的div</div><br><div class=\"two\">我 是class=two的div</div><br><div>我是没有id, class的div</div><br><span>我是一行数据</span><br>操作按钮: <br><input type=\"button\" value=\"选取id=one\" onclick=\"fun1()\" /><input type=\"button\" value=\"选取class=two\" onclick=\"fun2()\" /><input type=\"button\" value=\"选取div\" onclick=\"fun3()\" /></body>
4.创建 js 函数
<script type=\"text/javascript\">function fun1(){$(\"#one\"). css(\"background\", \"blue\");}function fun2(){$(\" . two\").css(\"background\" , \"red\")function fun3(){//所有的div, $(\"div\") 是jQuery数组,对数组内全部成员统一处理$(\"div\"). css(\"background\" , \"orange\");}</script>
所有选择器
语法$(“*”) 选取页面中所有 DOM 对象。
组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id，class，标签名等。
语法：$(“id,class,标签名”)
例：
1.上面的 selector.html 页面中加入按钮
<input type=\"button\" value=\" 所有DOM\" onclick=\"fun4()\" /><input type=\"button\" value=\" 选取两个DOM对\" onclick=\"fun5()\" />
2.增加 js 函数
function fun4(){//页面中全部$(\"*\").css(\"background\", \"yellow\");}function fun5(){//id是one，标签<span>$(\"#one，span\"). css(\"background\",\"pink\" )}
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法
无论是否存在表单，均可做出相应选择。表单选择器是为了能更加容易地操作表单，
表单选择器是根据元素类型来定义的
<input type=“text”>
<input type=“password”>
<input type=“radio”>
<input type=“checkbox”>
<input type=“button”>
<input type=“file”>
<input type=“submit”>
<input type=“reset”>
$(\”:tr\”): 不能用，tr 不是 input 标签
语法： $(\”:type 属性值\”)
例如：
$(\”:text\”)选取所有的单行文本框
$(\”:password\”)选取所有的密码框
$(\”:radio\”)选取所有的单选框
$(\”:checkbox\”)选取所有的多选框
$(\”:file\”)选取所有的上传按钮
例：
新建 form.html
页面定义元素
文本框: <input type=\"text\" value=\"我是type=text\"><br>性别: <br><input type=\"radio\" name=\"sex\" value=\"man\">男<br><input type=\"radio\" name=\"sex\" value=\"woman\">女<br>爱好: <br><input type=\"checkbox\" value=\"bike\">骑行<br><input type=\" checkbox\" value=\"football\" >足球<br><input type=\" checkbox\" value=\"music\" >音乐<br><br><p>功能按钮</p><input type=\"button\" value=\"读取text值\" onclick=\"fun1()\"/><input type=\"button\" value=\"读取radio值\" onclick=\"fun2()\"/><input type=\"button\" value=\"读取checkbox\" onclick=\"fun3()\"/>
定义 js 函数
<script type= \"text/javascript\">function fun1(){var $obj = $(\":text\");//获取第一一个DOM对象的值alert( $obj.val() );}function fun2(){var $obj = $(\":radio\");for(var i=0;i<$obj.length;i++){//jQuery对象转为DOM对象var obj = $obj[i];alert (obj.value);}}function fun3(){var $obj = $(\":checkbox\");for(var i=0;i<$obj . length;i++){//jQuery对象转为DOM对象var obj = $obj[i];alert(obj. value);//jQuery对象的用法//alert( $($obj[i]).val() );}}</script>
4.过滤器
jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
<div>1</div> dom1
<div>2</div> dom2
<div>3</div> dom3
$(“div”) == [dom1,dom2,dom3]
过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立
出现在 jquery 函数，如果使用只能出现在选择器后方。
基本过滤器
1.选择第一个 first, 保留数组中第一个 DOM 对象
语法：$(“选择器:first”)
2.选择最后个 last, 保留数组中最后 DOM 对象
语法：$(“选择器:last”)
3.选择数组中指定对象
语法：$(“选择器:eq(数组索引)”)
4.选择数组中小于指定索引的所有 DOM 对象
语法：$(“选择器:lt(数组索引)”)
5.选择数组中大于指定索引的所有 DOM 对象
语法：$(“选择器:gt(数组索引)”)
实例操作
1.定义样式
<style type=\"text/css \">div {background: gray;}</style>
2.页面加入 div
<div id=\"one\">我是div-0</div><div id=\"two\">我是div-1</div><div>我是第三个div-2<div class=\"son\">我是div-3</div><div class=\"son\">我是div-4</div></div><div>我是div-5</div><br><span>我是span</span><br><p>功能按钮</p><input type=\"button\" id=\"btn1\" value=\"选择第一个div\" /> <br><input type=\"button\" id=\"btn2\" value=\"选择最后一 个div\" /><br><input type=\"button\" id=\"btn3\" value=\"选择索引等于3的div\" /><br><input type=\"button\" id=\"btn4\" value=\"选择索引小于3的div\" /><br><input type=\"button\" id=\"btn5\" value=\"选择索引大于3的div\" /><br>
3.定义 js 函数
<script type=\"text/javascript\">$(function(){//jQuery绑定事件$(\"#btn1\").click(function(){$(\"div:first\").css(\"background\", \"blue\")})$( \"#btn2\").click(function(){$(\"div: last\") .css(\"background\", \"pink\") ;})$(\" #btn3\"). click(function(){$(\"div:eq(3)\").css(\"background\" , \"orange\");})$(”#btn4\"). click(function(){$(\"div:lt(3)\"). css(\"background\", \"yellow\");})$(\"#btn5\").click(function(){$(\"div:gt(3)\").css(\"background\" , \"yellow\");})})</script>
表单对象属性过滤器
1 . 选择可用的文本框
$(“:text:enabled”)
2.选择不可用的文本框
$(“:text:disabled”)
3.复选框选中的元素
$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
选择器>option:selected
例：
创建 filterForm.html
页面：
<p>文本框</p><input type=\"text\" id=\"text1\" value=\"text1\" /> <br><input type=\"text\" id=\"text2\" value=\"text2\" disabled /><br><input type=\"text\" id=\"text3\" value=\"text3\" /><br><input type=\"text\" id=\"text4\" value=\"text4\" disabled /><br><br><p>复选框</p><input type=\"checkbo\" value=\"游泳\" />游泳<br><input type=\"checkbox\" value=\"健身\" checked />健身<br><input type=\"checkbox\" value=\"电子游戏\" checked />电子 游戏<br><br><p>下拉框</p><select id=\"lang\"><option value=\"java\">java语言</option><option value=\"go\" selected>go语言</option><option value=\"sql\">sql语言 </option></select><p>功能按钮</p><button id=\"btn1\">所有可用的text设值hello</button> <br><button id=\"btn2\"> 显示被选中的复选框的值</button><br><button id=\"btn3\"> 显示下拉列表选中的值</button><br>
js 函数
<script type=\"text/javascript\">$(function(){//jQuery绑定事件$(\"#btn1\").click(function(){$(\":text :enabled\"). val(\"Hello\")})$(\"#btn2\").click(function(){var $obj = $(\" :checkbox: checked\") ;$obj.each( function(i,n){alert(\"第\"+i+\"个成员，DOM值是:”+n. value+\" jQuery对象取值:\"+ $(n).val());})})$(\"#btn3\").click(function(){//有选中的第一-个select的optionvar $obj = $(\"select > option:selected\");alert($obj.val() + \" \"+$obj.text());//选择id=lang的select//var $obj=$(\"#lang>option:selected\");//alert($obj.val()+\" \"+$obj.text());})})</script>
5.函数
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 对象的属性设为新值
例：
创建 fun1.html
样式
<style type=\"text/css\">div {background: blue;}</style>
页面：
<p>文本框val</p><input type=\"text\" value=\"刘备\"/><br><input type=\"text\" value=\"关羽\"/><br><input type=\"text\" value=\"张飞\"/><br><p>文本数据text</p><div>我是第一个div</div><div>我是第二个div</div><div>我是第三个div</div><p>图片</p><img id=\" img1\" src=\"img/ex1.jpg\" /><br><img id=\"img1\" src=\" img/ex2.jpg\" /><br><p>功能按钮</p><button id=\"btn1\">获取第一个文本框的值</button> <br><button id=\"btn2\">设置所有 文本框为新值< /button><br><button id=\"btn3\">获取div的所有文本</button><br><button id=\"btn4\">获取第一个div的文本</button><br><button id=\"btn5\">设置div新文本</button><br><button id=\"btn6\">设 置img图片</button><br>
js 函数
<script type=\"text/javascript\">$(function(){//jQuery绑定事件$(\" #btn1\"). click(function(){var txt = $(\":text\"). val();alert(\"我是多个text的第一个: \"+txt);})$(\" #btn2\").click(function(){$(\":text\").val(\"王者荣耀还是三国志\" )})$(\"#btn3\") .click(function(){alert($(\"div\"). text());})$(\" #btn4\").click(function(){alert( $(\"div:first\"). text() )})$(\"#btn5\").click(function(){$(\"div\"). text(\"我是小强\")})$(\"#btn6\"). click( function(){alert($(\"img\") .attr(\"src\"))$(\"img\").attr(\"srC\",”img/ex3.jpg\" ) ;})})</script>
1.hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
3.remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4.empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
5.append
为数组中所有 DOM 对象添加子对象
$(选择器).append(\”<div>我动态添加的 div\”)
6.html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。
7.each
each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象
例：
新建 fun2.html
样式：
<style type= \"text/css\">div {background: blue;}</style>
页面
<p>show和hide</p><div id=\"one\">我是one</div><div id=\"two\">我是two</div><p>remove和empty</p><select><option>老虎</option><option>狮子</option><option>豹</option></select><br><select><option>大洋洲</option><option>欧洲</option><option>美洲</option></select><br><p>append</p><div id=\"father\" style=\"background: red;\">我是父div</div><br><p>html</p><span>mysql是一个<b>数据库</b></span><br><span>使用jdbc访问数据库</span><br><p>功能按钮</p><button id=\"btn1\">隐藏所有 div</button> <br><button id=\"btn2\"> 显示所有div</button><br><button id=\"btn3\" >清除所有下拉列表中option子标签</button><br><button id=\"btn4\">删除所有 下拉列表</button><br><button id=\"btn5\" >添加元素</button><br><button id=\"btn6\">获取第一个span文本内容</button><br><button id=\"btn7\">设置span的内容</button><br><button id=\"btn8\" >each循环< /button><br><option>欧洲</option><option>美洲</option></select><br><p>append</p><div id=\"father\" style=\"background: red;\">我是父div</div><br><p>html</p>
js 函数
$(\"#btn1\"). click(function(){$(\"div\").hide();})$(\"#btn2\"). click(function(){$(\"div\"). show();})$(\"#btn3\"). click(function(){$(\"select\") . empty();})$(\" #btn4\"). click(function(){$(\"select\").remove();})$(\"#btn5\").click(function(){$(\" #father\").append(\"<input type= \' text\' value= \'我是动态添加的input\'/>\");})$(\"#btn6\"). click(function(){alert($(\"span\").html());})$(”#btn7\"). click(function(){$(\" span\").html(\"我是span标签\" );})$(\" #btn8\").click( function(){$(\"span\").each(function(i,n){alert(\"索引:\"+i+\" \"+ n. innerHTML )})})
each 用法
页面上加入 text
<p>文本框val</p><input type=\"text\" value=\"刘备\" /><br><input type=\"text\" value=\"关羽\" /><br><input type=\"text\" value=\"张飞\"/><br>
加入 三个按钮， 创建点击事件
$(\"#9\"). click(function(){//遍历数组var arr=[\"a\",\"b\",\"c\"];$.each(arr , function(i,n){alert(\"数组下标: \"+i+\",成员是: \"+n)})})
$(\" #btn10\").click(function(){//遍历json对象var arr={name:\"zhangsan\" , age:20};$ . each(arr, function(i,n){alert(\"key是: \"+i+\", value是 : \"+n)})})$(\"#btn11\").click(function(){//遍历dom数组$.each($(\":text\")，function(i,n){alert(\"下标是: \"+i+\", dom的value是 : \"+n.value)})})
或者
$(\"#btn11\").click(function(){//遍历dom数组$(\":text\").each(function(i,n){alert(\"下标是: \"+i+\", dom的value是 : \"+n.value)})})
6.事件
为页面元素绑定事件，即对于指定页面元素，当某个事件发生后，执行指定动作
定义元素监听事件
语法：$(选择器).监听事件名称(处理函数);
说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click
例如：
为页面中所有的 button 绑定 onclick,并关联处理函数 fun1
$(“button”).click(fun1)
为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
$(“tr”).mouseover(fun2)
on() 绑定事件
on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
语法：$(选择器).on(event,data,function)
event：事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。
例：
新建 event.html
样式：
<style type=\"text/css\">div {background: gray;width: 200px;height: 80px;}</style>
页面：
<body><p>功能按钮</p><button id=\"btn1\">动态添Button< /button><br><br><div id=\"mydiv\"></div><p>可以click me</p></body>
js 函数
$(function(){$(\" #btn1\"). on(\"click\" ,function(){$(”#mydiv\") . append(\"<button id= \' mybutton \'>我是添加的NewButton< /button\");$(”#mybutton\") . on(\"click\", function(){alert(\"NewButton被点了\");});})$(\"p\") . on(\"click\", { name :\" zhangsan\"}, function(event){// event.data 获取传入的参数event是自定义名称alert( event . data. name)})})
7.AJAX
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get
和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
到 DOM 对象
$.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, … } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ： 布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是：“application/x-www-form-urlencoded”。
data：规定要发送到服务器的数据，可以是：string， 数组，多数是 json
dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text, html 这些中测试最可能
的类型
“xml” – 一个 XML 文档
“html” – HTML 作为纯文本
“text” – 纯文本字符串
“json” – 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。 error() , success()中的 xhr 是 XMLHttpRequest 对象。
$.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data – 包含来自请求的结果数据
status – 包含请求的状态（“success”、“notmodified”、“error”、“timeout”、“parsererror”）
xhr – 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
“xml” – 一个 XML 文档
“html” – HTML 作为纯文本
“text” – 纯文本字符串
“json” – 以 JSON 运行响应，并以对象返回
$.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$g
搬运不易，点个赞再走呗，感谢感谢。转载自北京动力节点jQuery专题课
