一 第一章 简介和简单演示例子
1 官网地址和解释
分为压缩和非压缩,压缩的小,适合做产品,非压缩的适合开发
2 js自动载入程序方法
window.οnlοad=function()
{
alert(“hello”);
}
3 区别有无空格的样式的定义组件$("div #a")和$("div#a")
有空格是其下面,没有空格是其本身
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
<title>1-1</title>
<!-- 引入 jQuery -->
<scriptsrc="../scripts/jquery-1.3.1.js"type="text/javascript"></script>
<scripttype="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
alert("HelloWorld!");
$("div#a").css("color","red");
//$("div#a").css("color","red");
});
</script>
</head
<body>
<div id="a" >
hello
<div id="b">
demo
</div>
</div>
</body>
</html>
二 jquery强大选择器(过滤器以:开头)
1 常用选择—5种--标签(div),#id,.class, *(选择所有),以逗号隔开
//* 表示所有的
逗号表示多个或者关系的
2 层次过滤—4种—(父子)--空格(多个多层),>(多个单层),+(后单个同辈),~(多个后同辈),
空格:后代说有
>:子类 只是儿子部分
+ 选择下一个 同辈份的元素(next),可以是不同元素
~ 多个后同辈
3 常用过滤—11种—(大小位置)--针对自--:first,:last,:not(常用选择器),:even,:odd,:eq(index),:lt(index),
:gt(index),:header(。。。例如h1,h2),:animated,:focus
:odd:基数的,索引0开始的
:even:偶数的
很好理解的
4 内容过滤—4种—:contains()文本内容,:has()标签,:empty没有内容(文本算内容),:parent(有子元素的,包含文本text)
5 可见过滤—2种--:visible,hidden
6 属性内容--8种-[id](包含id属性),[id=a],[id!=a](不等),[id^=a]开头,$结尾,*(包含a即可),~(以空格分隔的),[][][]多个都满足条件的
1 实例:div[title~=bw]title包含,并且用空格分隔开来的
<scriptsrc="../scripts/jquery-1.3.1.js"type="text/javascript"></script>
<scripttype="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
//alert("HelloWorld!");
$("div[title~=bw]").css("color","red");
//$("div:last").css("color","red");
//$("div#a").css("color","red");
//$("div#a").css("color","red");
});
</script>
</head
<body>
<div id="a" title="ukml" >
hello
<div id="b" title="bwok">
demo
</div>
</div>
7 子元素—4种—带分隔空格:last-child,
first-child,only-child,nth-child(序号,基偶)
和层次过滤的最大区别是,他是子元素,而层次例如 :first
层次是本层同辈的,不好说,有空格就是下面,没空格就是自己
$("div:nth-child(even)").css("color","red");
8 表单动作过滤—4种--:enabled,disabled,:checked(单选复选),:selected(下拉列表)
9 表单对象专门的—11种--:input,:text,:password,:radio,:checkbox,:submit,
:image,:reset,:button,:file,:hidden
三 dom操作查找,建立,插入,删除,复制,替换,包裹,操作属性和操作样式,遍历,偏移量
1 查找内容和属性text(),attr()
2 建立
Var $li = $(“<li><li>”)
3 插入节点 8个
Append,appendTo,prepend,prepedTo,afterinsertAfter before,insertBefore
4 删除3个
Remove,detch,empty
5 colne 复制 1个
6 替换 replacewith/replaceAll 方向不同
7 包裹3个wrapAll (只一个)wrap(符合的都包括),wrapInner(内部)
8 操作—获取和设置 text,html,value(带value属性的)
9 样式操作
A:获取和设置attr(a),attr(a,b)
B:追加 addClass(a)同时包含了原来的样式
10 遍历节点—7个
Children,next,prev,siblings,parent,parents,closest
10 3个综合方法
Offset(left,top),position(left,top),scrollTop,scrollLeft