1. 什么是jQuery
它是一个轻量级的javascript类库(重量级的有ext.js)。
注1:就一个类“jQuery”,简写“$”,它是一个容器。
- jQuery优点
(1)兼容浏览器
(2)总是面向集合
(3)多行操作集于一行
3.如何使用jQuery(hello jQuery)
3.1 导入js库
3.2 jquery(document).ready(fn)
(document).ready(function());简写:
(
d
o
c
u
m
e
n
t
)
.
r
e
a
d
y
(
f
u
n
c
t
i
o
n
(
)
)
;
简
写
:
(fn)
匿名函数function(){}
jQuery三种工厂方法
工厂方法:实例化jQuery对象4.1 jQuery(selector[,context])语法
$(“a”, document) //jquery选择器,作用:找对象
selector:选择器
context:上下文,环境/容器,documemt4.1.1 选择器
元素选择器 (“a”)类选择器:. ( “ a ” ) 类 选 择 器 : . (“.a1”)
ID选择器:# (“#a2”)
属性选择器:[] (“#a2”) 属性选择器:[] (“input[name=’btn’]”)
包含选择器:E1 E2 (“p.a3”)组合选择器:E1,E2,E3 ( “ p . a 3 ” ) 组 合 选 择 器 : E 1 , E 2 , E 3 (“.a1,.a2”)
自定义选择器::exp ("a",document) ( " a " , d o c u m e n t ) (“a”, “div”) == (‘diva′)匹配选择器::eq(index) ( ‘ d i v a ′ ) 匹 配 选 择 器 : : e q ( i n d e x ) (“tr:eq(1)”) 选择tr标签中下标为1的对象
$(“tr:even”) 选择tr标签中下标为偶数的对象,从0开始4.2 jQuery(html)
html:基于html的一个字符串。案例:
... ("input[name=’btn1’]").click(function(){
====================================================
–请选择–
//将HTML文本追加到ID="s1"的对象中 ("input[name=’btn1’]").click(function(){ //将HTML文本追加到ID="s1"的对象中 ("value").appendTo("#s1"); //在ID="s1"的对象中追加HTML文本 $("#s1").append("value2"); });====================================================
4.3 jQuery(element)
element:js对象,表示一个html元素。
案例: ("a") ( " a " ) (“td”)jQuery属性写法
(1)无参数: (“p”).text();(2)参数val: ( “ p ” ) . t e x t ( ) ; ( 2 ) 参 数 v a l : (“p”).text(“Hello world!”);
(3)回调函数: (“p”).text(function(n)return“这个p元素的index是:”+n;);(4)参数properties: ( “ p ” ) . t e x t ( f u n c t i o n ( n ) r e t u r n “ 这 个 p 元 素 的 i n d e x 是 : ” + n ; ) ; ( 4 ) 参 数 p r o p e r t i e s : (“img”).attr({
src: “test.jpg”,
alt: “Test Image”
});jQuery常用属性:见API中属性目录。
jQuery事件写法:
(“p”).click(function(){ (“p”).click(function(){ (this).hide();
});- console对象
console.log(“文字”); 输出普通信息