这篇博客介绍了jQuery库的基础知识，包括如何使用元素选择器、ID选择器和类选择器来操作HTML元素。jQuery简化了DOM操作，支持链式操作，并提供了丰富的事件处理，如click事件。此外，还展示了如何使用AJAX方法进行异步数据请求。博客还涵盖了jQuery中的DOM元素操作，如获取和修改元素内容、CSS样式以及数据操作。
jQuery简介
jQuery是一个实用的JavaScript库。jQuery极大地简化了JS对DOM的操作，实现一些常用的方法，jQuery还可以链式操作。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
实例
用户点击按钮后，所有 <p> 元素都隐藏：
实例
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
实例
当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
实例
$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
实例
用户点击按钮后所有带有 class="test" 属性的元素都隐藏：
实例
$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
更多实例
| 语法 | 描述 | 实例 |
|---|---|---|
| $("*") | 选取所有元素 | 在线实例 |
| $(this) | 选取当前 HTML 元素 | 在线实例 |
| $("p.intro") | 选取 class 为 intro 的 <p> 元素 | 在线实例 |
| $("p:first") | 选取第一个 <p> 元素 | 在线实例 |
| $("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 | 在线实例 |
| $("[href]") | 选取带有 href 属性的元素 | 在线实例 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 | 在线实例 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 | 在线实例 |
| $(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 | 在线实例 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 | 在线实例 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 | 在线实例 |
jQuery ajax() 方法
实例
使用 AJAX 请求改变 <div> 元素的文本：
$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); });
定义和用法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法
$.ajax({name:value, name:value, ... })
该参数规定 AJAX 请求的一个或多个名称/值对。
下面的表格中列出了可能的名称/值：
| 名称 | 值/描述 |
|---|---|
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。 |
| dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr | 用于创建 XMLHttpRequest 对象的函数。 |
jQuery的基本用法
//引入jQuery文件，可以本地也可以远程
<script type="text/javascript" src="jQuery.js"></script> <script type="text/javascript"> //当文档完成加载完时触发，避免获取dom对象时，dom对象还没有加载 $(document).ready(function(){ //写js语句或者jQuery函数 $("p").click(function(){ $(this).hide(); }); }); </script>
jQuery常用的选择器和事件，和CSS的选择器很相似。
$() – 使用CSS选择器匹配元素 jQuery的事件和JS的事件基本相同，在使用的时候，去掉JS事件前面的on即可。 jQuery常用的事件： load：当文档加载时运行脚本 blur：当窗口失去焦点时运行脚本 focus：当窗口获得焦点时运行脚本 change：当元素改变时运行脚本 submit：当提交表单时运行脚本 keydown：当按下按键时运行脚本 keypress：当按下并松开按键时运行脚本 keyup：当松开按键时运行脚本 click：当单击鼠标时运行脚本 dblclick：当双击鼠标时运行脚本 mousedown：当按下鼠标按钮时运行脚本 mousemove：当鼠标指针移动时运行脚本 mouseout：当鼠标指针移出元素时运行脚本 mouseover：当鼠标指针移至元素之上时运行脚本 mouseup：当松开鼠标按钮时运行脚本 abort：当发生中止事件时运行脚本
jQuery常用的DOM元素操作方法
$(selector).parent() – 返回被选元素的直接父元素。 $(selector).parents() – 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)，可选参数来过滤对祖先元素的搜索 $(selector).children() – 返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索 $(selector).find() – 返回被选元素的后代元素，一路向下直到最后一个后代，可选参数来过滤对后后代元素的搜索 $(selector).siblings() – 返回被选元素的所有同胞元素。过滤对同胞元素的搜索。 $(selector).next() – 返回被选元素的下一个同胞元素。 $(selector).nextAll() – 返回匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。 $(selector).prev() – 返回的是前面的同胞元素 $(selector).prevAll() – 返回匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。 $(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。 $(selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。 $(selector).eq() – 指定索引的新元素。 $(selector).get() – 获得由选择器指定的 DOM 元素。 $(selector).index() – 返回指定元素相对于其他指定元素的 index 位置。 注：parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选，比如：parents()、siblings()、nextAll()、prevAll()、siblings()。
$(selector).each() 对对象进行迭代，为每个元素执行函数 $(selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 $(selector).size() 返回被 jQuery 选择器匹配的元素的数量
$(selector).text() – 设置或返回所选元素的文本内容 $(selector).html() – 设置或返回所选元素的内容（包括 HTML 标记） $(selector).val() – 设置或返回表单字段的值 $(selector).append() – 在被选元素的结尾插入内容 $(selector).prepend() – 在被选元素的开头插入内容 $(selector).after() – 在被选元素之后插入内容 $(selector).before() – 在被选元素之前插入内容 $(selector).remove() – 删除被选元素（及其子元素） $(selector).empty() – 从被选元素中删除子元素 $(selector).removeAttr() – 从所有匹配的元素中移除指定的属性。 $(selector).clone() – 创建匹配元素集合的副本 $(selector).load() – 从服务器加载数据，然后把返回到 HTML 放入匹配元素
jQuery对CSS的操作
$(selector).height() – 设置或返回匹配元素的高度。 $(selector).width() – 设置或返回匹配元素的宽度。 $(selector).addClass() – 向被选元素添加一个或多个类 $(selector).removeClass() – 从被选元素删除一个或多个类 $(selector).toggleClass() – 对被选元素进行添加/删除类的切换操作 $(selector).css() – 设置或返回样式属性 $(selector).hasClass() 检查匹配的元素是否拥有指定的类。
jQuery其他知识点
$(selector).data() – 存储与匹配元素相关的任意数据 $(selector).removeData() – 移除之前存放的数据 $(selector).serialize() – 将表单内容序列化为字符串 $(selector).serializeArray() – 序列化表单元素，返回 JSON 数据结构数据
$冲突的解决办法
-
* //释放$标识符的控制，使用默认的变量jQuery*
-
$.noConflict();
-
//自定义变量
-
var jq = $.noConflict();
jQuery Ajax 操作函数
$.ajax() – 执行Ajax异步请求 $.get() – 使用GET请求从服务器获取数据 $.getJSON() – 使用GET从服务器请求JSON编码数据 $.getScript() – 使用GET从服务器请求JavaScript文件并执行该文件 $.post() – 使用POST请求从服务器获取数据
扫一扫
4716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
