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");
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 值</button>
$(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> 元素: