jQuery 常用语法总结（未完成不定期更新）

最新推荐文章于 2022-08-08 09:02:44 发布

阿飞_程序员

最新推荐文章于 2022-08-08 09:02:44 发布

阅读量327

点赞数

分类专栏： jquery 文章标签： jquery js javascript

本文链接：https://blog.csdn.net/weixin_44197026/article/details/114413411

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

2.文档就绪事件

完整写法：$(document).ready(function(){ // 开始写 jQuery 代码... });

简化写法：$(function(){ // 开始写 jQuery 代码... });

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

3.jQuery 选择器有元素选择器、#id 选择器、.class选择器

在页面中选取所有 <p> 元素: $("p")

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

在页面中选取 id="test" 元素: $("#test")

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

在页面中选取 class="test" 元素: $(".test")

$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

4..jQuery 事件（常用的）

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

举个栗子

$("p").click(function(){ $(this).hide(); });

5.jQuery 显隐藏

隐藏hide();

显示show();

设置显隐藏时间

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$("button").click(function(){ $("p").hide(1000); });

6.jQuery捕获内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() -方法用于获取属性值。

$("#test").text();

$(#test).html();

$(#test).val();

$(#test).attr();
<p><a href="//www.runoob.com" id="test">菜鸟教程</a></p>
<button>显示 href 属性的值</button>

$(document).ready(function(){ $("button").click(function(){ alert($("#test").attr("href")); });});
结果为：//www.runoob.com

7.jQuery设置内容和属性

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

$("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });

$("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; });

$("#runoob").attr("href", function(i, origValue){ return origValue + "/jquery"; });

<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>

$("#test1").text("Hello world!");

$("#test2").html("<b>Hello world!</b>");

$("#test3").val("RUNOOB");

$(document).ready(function(){ $("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery");});});

最终的结果可以修改 href="http://www.runoob.com/jquery"

8.jquery添加元素

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

$("p").append("结尾追加文本");

$("p").prepend("开头追加文本");

9.jquery删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素，自身的元素还是保留的

$("#div1").remove();

$("#div1").empty();
$("p").remove(".italic"); 删除 <p> 元素中：所有的class="italic" 的元素

10jquery遍历

parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

$("span").parent(); 返回每个 <span> 元素的直接父元素：

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

$("span").parents(); 返回所有 <span> 元素的所有祖先：

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

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

$("span").parents("ul");

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

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

$("span").parentsUntil("div");

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

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

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

$("div").children();

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

$("div").children("p.1");

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

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

$("div").find("span");

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

$("div").find("*");

水平遍历

siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev() 方法返回被选元素的上一个同胞元素。
prevAll() 方法返回被选元素的所有它前面的同胞元素。
prevUntil() 不知道怎么解释这个

$("h2").siblings();

您也可以使用可选参数来过滤对同胞元素的搜索。下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

$("h2").siblings("p");

$("h2").next();

$("h2").nextAll();

$("h2").nextUntil("h6");

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

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

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

$("div p").first();

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

选择最后一个 <div> 元素中的最后一个 <p> 元素：

$("div p").last();

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

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：并且让它背景颜色为黄色。

$("p").eq(1).css("background-color","yellow");

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

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

<p>菜鸟教程 (index 0).</p>
<p class="url">http://www.runoob.com (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>
$("p").filter(".url").css("background-color","yellow");

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

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

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

阿飞_程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 常用语法总结（未完成不定期更新）

1.基础语法：$(selector).action()美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素 $("#test").hide().
复制链接

扫一扫

专栏目录