快速了解jquery

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

所以jquery的基础语法是：

$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作

1.使用选择器选择元素

$("#lastname") 选择id="lastname" 的元素 $(".intro") 选择所有 class="intro" 的元素 $("p") 选择所有 <p> 元素 $(".intro.demo") 选择所有 class="intro" 且 class="demo" 的元素 $("p:first") 选择第一个 <p> 元素 $("[href]") 所有带有 href 属性的元素 $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始） $("ul li:gt(3)") 列出 index 大于 3 的元素 $("ul li:lt(3)") 列出 index 小于 3 的元素

2.遍历

通过遍历函数，可以来筛选、查找和串联元素。

$("div").add("p") 给div元素添加一个p元素 $("div").children(".selected") 找到类名为 "selected" 的所有 div 的子元素 $("p").find("span") 搜索所有段落中的后代 span 元素 $("div").filter(".middle") 找到类名为 "middle" 的类 $("p").next(".selected") 查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落 $("p").prev(".selected") 检索每个段落，找到类名为 "selected" 的前一个同胞元素

3.事件

jQuery设计思想，就是把事件直接绑定在网页元素之上。

$('p').click(function(){//给p绑定一个单击事件 　　　　alert('Hello'); 　　}); $('input').bind( 　　　　'click change', //同时绑定click和change事件 　　　　function() { 　　　　　　alert('Hello'); 　　　　} 　　);

4.jquery自带的效果

$("p").fadeIn(1000);淡入一个段落效果，速度1秒 $("p").fadeOut(1000);淡出一个段落效果，速度1秒 $("p").hide();隐藏一个p元素效果 $("p").show();显示一个p元素效果

5.jquery对文档进行操作

元素的取值和赋值，移动，复制、删除和创建等等

$("p").html()查看所有 p 元素的内容 $("p").html("Hello <b>world</b>!");设置所有 p 元素的内容 $("p").text("Hello world!");设置所有 <p> 元素的文本内容 $("p").append(" <b>Hello world!</b>");在所有的p元素后面添加<b>Hello world!</b> .insertAfter()和.after()：在现存元素的外部，从后面插入元素 .insertBefore()和.before()：在现存元素的外部，从前面插入元素 .appendTo()和.append()：在现存元素的内部，从后面插入元素 .prependTo()和.prepend()：在现存元素的内部，从前面插入元素 清空元素内容（但是不删除该元素）使用.empty()。 删除元素使用.remove()和.detach()。 复制元素使用.clone()。

6.属性操作

通过下面的方法获得或设置元素的 DOM 属性

hasClass() 检查匹配的元素是否拥有指定的类。 addClass() 向匹配的元素添加指定的类名。 removeClass() 从所有匹配的元素中删除全部或者指定的类。 toggleClass() 从匹配的元素中添加或删除一个类。 attr() 设置或返回匹配元素的属性和值。 removeAttr() 从所有匹配的元素中移除指定的属性。 val() 设置或返回匹配元素的值。

7.css操作

$("p").css("color","red");设置 <p> 元素的颜色,css() 方法返回或设置匹配的元素的一个或多个样式属性。 height() 设置或返回匹配元素的高度。 offset() 返回第一个匹配元素相对于文档的位置。 offsetParent() 返回最近的定位祖先元素。 position() 返回第一个匹配元素相对于父元素的位置。 scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。 scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。 width() 设置或返回匹配元素的宽度。

8.其它

（1）Ajax 操作

资料：

(1)jQuery设计思想

(2)jQuery 参考手册

转载于:https://www.cnblogs.com/YeChing/p/6291725.html

相关资源：快速掌握jQuery插件开发