jQuery

最新推荐文章于 2022-08-29 21:38:15 发布

草丛是我家QAQ

最新推荐文章于 2022-08-29 21:38:15 发布

阅读量116

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_39062385/article/details/93536816

版权

1.语法

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

selector(选择符)：查找HTML元素

action():执行元素的对应操作

2.选择器

jQuery选择器基于元素的id，类，类型，属性，属性值等查找HTML元素，基于已存在的CSS，此外它还有一些自定义选择器。

3.常用的jQuery事件

click()： click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。

dblclick()：当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()：hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

focus()：当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

blur()：当元素失去焦点时，发生 blur 事件。

4.jQuery Html

获得内容：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

xt()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

获取属性：

.attr() 获取属性值

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

添加元素：

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

jQuery的append()和prepend()方法

// jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。
$("p").append("追加文本");
// jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("在开头追加文本");
// append() 和 prepend() 方法能够通过参数接收无限数量的新元素。

jQuery的after()和before()方法

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
// after() 和 before() 方法能够通过参数接收无限数量的新元素

删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

//  remove() 方法删除被选元素及其子元素。
$("#div1").remove();

// jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
$("p").remove(".italic");

//  Query empty() 方法删除被选元素的子元素。
$("#div1").empty();

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

css的方法：css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性：css("propertyname");

// 将返回首个匹配元素的 background-color 值：
$("p").css("background-color");

设置 CSS 属性：css("propertyname","value");

// 将为所有匹配元素设置 background-color 值
$("p").css("background-color","yellow");

设置多个 CSS 属性：css({"propertyname":"value","propertyname":"value",...});

// 下面的例子将为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});

5.jQuery 遍历

向上遍历 DOM 树祖先

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

$(document).ready(function(){
  $("span").parent();
});

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

$(document).ready(function(){
  $("span").parents();
});

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

向下遍历 DOM 树后代

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素：

$(document).ready(function(){
  $("div").children();
});

也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

jQuery find() 方法

ind() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function(){
  $("div").find("span");
});

下面的例子返回 <div> 的所有后代：

$(document).ready(function(){
  $("div").find("*");
});

在 DOM 树中水平遍历同胞(siblings)

有许多有用的方法让我们在 DOM 树进行水平遍历：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回 <h2> 的所有同胞元素：

$(document).ready(function(){
  $("h2").siblings();
});

也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回 <h2> 的下一个同胞元素：

$(document).ready(function(){
  $("h2").next();
});

jQuery nextAll() 方法

nextAll() 方法返回被选元素的所有跟随的同胞元素。

下面的例子返回 <h2> 的所有跟随的同胞元素：

$(document).ready(function(){
  $("h2").nextAll();
});

jQuery nextUntil() 方法

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

jQuery prev(), prevAll() & prevUntil() 方法

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

jQuery 过滤

缩小搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

jQuery first() 方法

first() 方法返回被选元素的首个元素。

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

$(document).ready(function(){
  $("div p").first();
});

jQuery last() 方法

last() 方法返回被选元素的最后一个元素。

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

$(document).ready(function(){
  $("div p").last();
});

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() 方法

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名 "url" 的所有 <p> 元素：

$(document).ready(function(){
  $("p").filter(".url");
});

jQuery not() 方法

not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

下面的例子返回不带有类名 "url" 的所有 <p> 元素：

$(document).ready(function(){
  $("p").not(".url");
});

6.jQuery的Ajax

jQuery AJAX 方法

方法	描述
$.ajax()	执行异步 AJAX 请求
$.ajaxPrefilter()	在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup()	为将来的 AJAX 请求设置默认值
$.ajaxTransport()	创建处理 Ajax 数据实际传送的对象
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()	使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()	创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()	规定 AJAX 请求完成时运行的函数
ajaxError()	规定 AJAX 请求失败时运行的函数
ajaxSend()	规定 AJAX 请求发送之前运行的函数
ajaxStart()	规定第一个 AJAX 请求开始时运行的函数
ajaxStop()	规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()	规定 AJAX 请求成功完成时运行的函数
load()	从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()	编码表单元素集为字符串以便提交
serializeArray()	编码表单元素集为 names 和 values 的数组

草丛是我家QAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

1.语法基础语法：$(selector).action()selector(选择符)：查找HTML元素action():执行元素的对应操作2.选择器jQuery选择器基于元素的id，类，类型，属性，属性值等查找HTML元素，基于已存在的CSS，此外它还有一些自定义选择器。3.常用的jQuery事件click()： click() 方法是当按钮点击事件被触发时会调用...
复制链接

扫一扫