快速了解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 参考手册