回顾：
JS javaScript 脚本语言
组成部分：
ECMScript:基本语法
BOM:浏览器对象
DOM：文档对象
ECMScript:基本语法
变量声明 var 变量名＝初始化值;
数据类型:
原始类型：
Undefined Null
String Number Boolean:伪对象
typeof运算符可以判断出属于哪种原始类型
引用类型：
Boolean Number
String:
常用属性：length
常用方法：
substring
split
replace
Array
常用属性：length
注意：
array长度可以变化
array可以存放任意值
Math
Date
RegExp 常用方法：test();
直接量语法：
/正则表达式/
全局
decodeURI 解码
eval:计算字符串，解析成JS代码执行
运算符：
关系运算符
等性运算符 ＝＝ ＝＝＝
语法：
选择 循环
－－－－－－－－－－－－－－－－－－－－－
BOM:浏览器对象模型
window:窗口
常用属性：
获取其它的四个对象
window.location
常用方法：
消息框：
alert confirm prompt
定时器：
setInterval：周期
setTimeout:几秒显示，延迟
.0 打开关闭
open close
location:定位
location:href：设置或者获取url
history:历史
go()
--------------------------------
事件和函数
常握的事件
焦点：
onfocus
onblur
表单事件
onsumbit onchange改变
页面或者元素加载
onload
window.οnlοad=function(){}
单击事件
onclick
函数：
方式1：
funcation 函数名（参数列表）{
函数体
}
方式2：匿名函数
例如：window.οnlοad=function(){}
事件绑定函数
方式1：通过元素的事件属性
<xxx onxxx="函数名（参数）">
方式2：派发事件
dom对象.onxxx=function(){}
------------------------------------
DOM:文档对象模型
就是我们的html代码加载到内存中形成一棵dom树
<html>
<body>
</body>
</html>
节点：
文档节点：doucment
元素节点：element
属性节点：attribute
文本节点：text
获取一个元素节点通过document对象
操作元素的属性：
dom对象.属性
操作元素的标签体：
dom对象.innerHTML
jquery:js封装
以前js获取对象的时候
var obj = doucment.getElementById("id");
function getId(){
return doucment.getElementByID("id");
}
getId()
$:取值符
$("选择器")＝＝＝》获取元素
js类库：
对常用的方法和对象进行封装，方便我们使用
案例1：弹出广告
定时器
jQuery
-----------------------------
jquery和html的整合
通过sciprt标签的src属于导入jquery(js)类库
获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象＝＝＝>dom对象
方式1：
jquery对象[index]
方式2：
jquery对象.get（index）
页面加载
js:
window.οnlοad=function(){}//在一个页面只能使用一次
jquery：在一个页面中可以使用多次
方式1：
$(function(){})
方式2：
$(document).ready(function(){})
常握的事件
focus
blur
submit
change
click
派发事件
$("选择器").click(function(){})
等价于 js dom对象onxxx=function(){}
jquery效果：
显示和隐藏
show(毫秒数)
hide(毫秒数)
滑入或滑出
slideDown(毫秒数)：向下滑入
slideUp(毫秒数)：向上滑出
淡入或淡出
fadein(毫秒数)：淡入
fadeout（毫秒数）：淡出
弹出广告分析
1，面面加载成后之后$(function(){})开启一个定时器 setTimeOut()
2, 编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏
3，编写隐广告的方法
获取div,然后调用效果方法
－－－－－－－－－－－－－－－－－－－－－－
选择器总结：
基本选择器***
$("#id值") $(".class值") $("标签名")
了解：$("*")
理解：获取多个选择器 用逗号隔开
$("#id值,.class值")
层次选择器***
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟（大弟弟）
a~b:a的所有的弟弟
基本过滤选择器***
:first 第一个
:last 最的一一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index)great than>
:lt(index)low than<
内容过滤
:has("选择器"):包含指定选择器的元素
可见过滤：
:hidden
:visiable
属性过滤器***
[属性名]
[属性名＝‘值’]
表单过滤：
空格:input 所有的表单 子标签 input slect textarea button
----------------------
隔行换色案例
技术分析：
1，页面加载成功
2，获取所有奇数行 添加一个css
3，获取所有偶数行 添加一个css
属性和css操作总结：
对属性的操作：
attr():设置或者获取元素的属性
获取：
attr("属性名称") background=yellow
设置：
attr("属性名称","值")
设置多个属性
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称")：移除指定属性
添加class属生的时候
attr("class","值")
addClass("指定的样式") .css()
removeclass("指定的样式")
对css操作：操作元素的style属性
css():获取或者设置css样式
获取：
css("属性名")
设置一个属性
css("属性名","值")
设置多个
css({
"属性1":"值1",
"属性2":"值2"
})
获取元素的尺寸：
width()
height()
位置
offset()
left top right bottom
-----
全选或者全不选：
需求：就是将内容中复选框的选中状态和最上面的复选框保持一致
步骤分析：
1.确定事件 复选框的单击事件
2.函数中
a.获取该复选框的选中状态
b.获取所有的复选框的状态并且修改它们的状态
注意点：
若jquery版本>1.6，统一使用prop来操作属性
－－－－－－－－－－－－－－－－－－－－
总结：
js类库
对常见的方法和对象进行了封装，方便开发
jquery和html的整合
通过script src属性导入即可
获取jquery对象
$("选择器") jQuery("选择器")
dom对象和jquery对象之间的转换
dom-->jquery
$(dom对象)
jquery-->dom
方式1：jquery对象[index]
方式2: jquery对象.get(index)
选择器：
基本选择器***
$("#id值") $(".class") $("标签名") $("#one,.mini") $("*")
层次选择器***
a b:后代
a>b:孩子
a+b:大弟弟
a~b：弟弟们
基本过滤选择器
:first :last :odd :even :eq(index) :gt(index) :lt(indext)
内容过滤器
：has("选择器")
可见性过滤器：
:visible :hidden show()
表单过滤
空格：input/textarea/button
属性选择器
[属性] [属性='属性值']
派发事件
jquery对象.事件（function(){}）;
页面加载成功
$(function(){})
$(document.ready(function(){
}))
属性和css
attr():3个方法 removeAttr()
prop() 1.6版本之后
.css() addClass()
removeClass()
宽度和高度
width() height()
位置
offset() left right bottom top
案例 ：全选全不选案例 弹出广告 隔行换色
JS javaScript 脚本语言
组成部分：
ECMScript:基本语法
BOM:浏览器对象
DOM：文档对象
ECMScript:基本语法
变量声明 var 变量名＝初始化值;
数据类型:
原始类型：
Undefined Null
String Number Boolean:伪对象
typeof运算符可以判断出属于哪种原始类型
引用类型：
Boolean Number
String:
常用属性：length
常用方法：
substring
split
replace
Array
常用属性：length
注意：
array长度可以变化
array可以存放任意值
Math
Date
RegExp 常用方法：test();
直接量语法：
/正则表达式/
全局
decodeURI 解码
eval:计算字符串，解析成JS代码执行
运算符：
关系运算符
等性运算符 ＝＝ ＝＝＝
语法：
选择 循环
－－－－－－－－－－－－－－－－－－－－－
BOM:浏览器对象模型
window:窗口
常用属性：
获取其它的四个对象
window.location
常用方法：
消息框：
alert confirm prompt
定时器：
setInterval：周期
setTimeout:几秒显示，延迟
.0 打开关闭
open close
location:定位
location:href：设置或者获取url
history:历史
go()
--------------------------------
事件和函数
常握的事件
焦点：
onfocus
onblur
表单事件
onsumbit onchange改变
页面或者元素加载
onload
window.οnlοad=function(){}
单击事件
onclick
函数：
方式1：
funcation 函数名（参数列表）{
函数体
}
方式2：匿名函数
例如：window.οnlοad=function(){}
事件绑定函数
方式1：通过元素的事件属性
<xxx onxxx="函数名（参数）">
方式2：派发事件
dom对象.onxxx=function(){}
------------------------------------
DOM:文档对象模型
就是我们的html代码加载到内存中形成一棵dom树
<html>
<body>
</body>
</html>
节点：
文档节点：doucment
元素节点：element
属性节点：attribute
文本节点：text
获取一个元素节点通过document对象
操作元素的属性：
dom对象.属性
操作元素的标签体：
dom对象.innerHTML
jquery:js封装
以前js获取对象的时候
var obj = doucment.getElementById("id");
function getId(){
return doucment.getElementByID("id");
}
getId()
$:取值符
$("选择器")＝＝＝》获取元素
js类库：
对常用的方法和对象进行封装，方便我们使用
案例1：弹出广告
定时器
jQuery
-----------------------------
jquery和html的整合
通过sciprt标签的src属于导入jquery(js)类库
获取一个jquery对象
$("选择器") 或者 jQuery("选择器")
dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象＝＝＝>dom对象
方式1：
jquery对象[index]
方式2：
jquery对象.get（index）
页面加载
js:
window.οnlοad=function(){}//在一个页面只能使用一次
jquery：在一个页面中可以使用多次
方式1：
$(function(){})
方式2：
$(document).ready(function(){})
常握的事件
focus
blur
submit
change
click
派发事件
$("选择器").click(function(){})
等价于 js dom对象onxxx=function(){}
jquery效果：
显示和隐藏
show(毫秒数)
hide(毫秒数)
滑入或滑出
slideDown(毫秒数)：向下滑入
slideUp(毫秒数)：向上滑出
淡入或淡出
fadein(毫秒数)：淡入
fadeout（毫秒数）：淡出
弹出广告分析
1，面面加载成后之后$(function(){})开启一个定时器 setTimeOut()
2, 编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏
3，编写隐广告的方法
获取div,然后调用效果方法
－－－－－－－－－－－－－－－－－－－－－－
选择器总结：
基本选择器***
$("#id值") $(".class值") $("标签名")
了解：$("*")
理解：获取多个选择器 用逗号隔开
$("#id值,.class值")
层次选择器***
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟（大弟弟）
a~b:a的所有的弟弟
基本过滤选择器***
:first 第一个
:last 最的一一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index)great than>
:lt(index)low than<
内容过滤
:has("选择器"):包含指定选择器的元素
可见过滤：
:hidden
:visiable
属性过滤器***
[属性名]
[属性名＝‘值’]
表单过滤：
空格:input 所有的表单 子标签 input slect textarea button
----------------------
隔行换色案例
技术分析：
1，页面加载成功
2，获取所有奇数行 添加一个css
3，获取所有偶数行 添加一个css
属性和css操作总结：
对属性的操作：
attr():设置或者获取元素的属性
获取：
attr("属性名称") background=yellow
设置：
attr("属性名称","值")
设置多个属性
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称")：移除指定属性
添加class属生的时候
attr("class","值")
addClass("指定的样式") .css()
removeclass("指定的样式")
对css操作：操作元素的style属性
css():获取或者设置css样式
获取：
css("属性名")
设置一个属性
css("属性名","值")
设置多个
css({
"属性1":"值1",
"属性2":"值2"
})
获取元素的尺寸：
width()
height()
位置
offset()
left top right bottom
-----
全选或者全不选：
需求：就是将内容中复选框的选中状态和最上面的复选框保持一致
步骤分析：
1.确定事件 复选框的单击事件
2.函数中
a.获取该复选框的选中状态
b.获取所有的复选框的状态并且修改它们的状态
注意点：
若jquery版本>1.6，统一使用prop来操作属性
－－－－－－－－－－－－－－－－－－－－
总结：
js类库
对常见的方法和对象进行了封装，方便开发
jquery和html的整合
通过script src属性导入即可
获取jquery对象
$("选择器") jQuery("选择器")
dom对象和jquery对象之间的转换
dom-->jquery
$(dom对象)
jquery-->dom
方式1：jquery对象[index]
方式2: jquery对象.get(index)
选择器：
基本选择器***
$("#id值") $(".class") $("标签名") $("#one,.mini") $("*")
层次选择器***
a b:后代
a>b:孩子
a+b:大弟弟
a~b：弟弟们
基本过滤选择器
:first :last :odd :even :eq(index) :gt(index) :lt(indext)
内容过滤器
：has("选择器")
可见性过滤器：
:visible :hidden show()
表单过滤
空格：input/textarea/button
属性选择器
[属性] [属性='属性值']
派发事件
jquery对象.事件（function(){}）;
页面加载成功
$(function(){})
$(document.ready(function(){
}))
属性和css
attr():3个方法 removeAttr()
prop() 1.6版本之后
.css() addClass()
removeClass()
宽度和高度
width() height()
位置
offset() left right bottom top
案例 ：全选全不选案例 弹出广告 隔行换色
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
