jQuery总结

最新推荐文章于 2025-10-15 22:39:35 发布

原创最新推荐文章于 2025-10-15 22:39:35 发布 · 173 阅读

1 ·

CC 4.0 BY-SA版权

一、了解

1.https://jquery.com/download/

2.生产环境中用压缩版，开发环境中用未压缩版(可读性更高)

3.查看jquery版本：浏览器——>console——>$.fn.jquery

4.基础语法： $(selector).action()

美元符号$=== jQuery
选择符（selector）"查询"和"查找" 、"获取"HTML 元素
jQuery 的 action() 执行对元素的操作

5.入口函数：

//jQuery的入口函数
$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

//javascript的入口函数
window.onload = function(){
}

jQuery 入口函数与 JavaScript 入口函数的区别：
 jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
 JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

 jQuery 的入口函数 可以执行N次，且每一次都不会被上一次覆盖。
 Javascript 的 window.onload事件 执行一次  如果有第二次 会被覆盖。

二、jquery选择器

1.常用选择器
$("#id"):id选择器
$(".class"):类选择器
$("p"):标签选择器
$("*"):获取所有
$("p.class"):class="class"的p元素
$("ul li:first")
$("ul li:first-child")
$("[href]")
$("a[target='_blank']")
$("a[target!='_blank']")
$("tr:even")
$("tr:odd")

2.事件
hide()：隐藏(display:none)
show()：显示(display:block)
toggle()：隐藏/显示-切换

3.三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

4.元素属性
attr("") 方法用于获取属性值。attr("href")
attr("","") 方法也用于设置/改变属性值。attr("href","www.baidu.com")
prop("") 方法用于获取属性值。
prop("","") 方法也用于设置/改变属性值。

5.添加元素内容：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

6.删除元素和内容：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

7.CSS 操作的方法：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性 $("p").css({"background-color":"yellow","font-size":"200%"});

8.提供多个处理尺寸的重要方法：
width()：不包括padding、border、margin。
height()：不包括padding、border、margin。
innerWidth()：width+padding
innerHeight()：height+padding
outerWidth()：width+padding+border
outerHeight()：height+padding+border
outerWidth(true)：width+padding+border+margin
outerHeight(true)：height+padding+border+margin

9.遍历-祖先
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。$("span").parentsUntil("div");

10.遍历-子孙
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

11.遍历-同胞
siblings() 方法返回被选元素的所有同胞元素(前面和后面的)。
next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()

12.过滤方法
first() 方法返回被选元素的首个元素。
        $("div p").first();首个 <div> 元素内部的第一个 <p> 元素。
last() 方法返回被选元素的最后一个元素。
        $("div p").last(); 选择最后一个 <div> 元素中的最后一个 <p> 元素。
eq(index) 返回第index个元素。
filter(".classNamae") 方法允许您规定一个标准。
        不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。

13.ajax请求
 ①load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
        $(selector).load(URL,data,callback);
            必需的 URL 参数规定您希望加载的 URL。
            可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
            可选的 callback 参数是 load() 方法完成后所执行的函数名称。
 示例：
 $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });

②post
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

③get
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。