1. JQuery是一个基于javascript语言的框架 -- - 是对js代码的合理封装
2. js的缺点，jquery优点
1 ）js代码比较复杂 var tag = document. getElementById ( "idvalue" ) ;
jquery代码简单 var tag = $( "#idvalue" ) ;
2 ）js存在着浏览器差异，jquery可以屏蔽浏览器差异
3 ）提供了强大的界面支持
4 ) 简化Ajax的代码开发
1. 搭建环境 -- 引入相关资源文件（以. js文件形式存在）
< script type= "text/javascript" src= "js资源文件路径" > < / script>
2. 知识点
1 ）$( "#id" ) -- - 根据标签的id属性值获取标签对应的jquery对象
2 ）html ( ) -- - 获取标签体里的内容
3 ）css ( "css属性" , "css属性值" ) -- - 设置标签的css样式
1. 通过document. getElementById ( . . ) 获取的是dom对象，不能使用jquery定义的函数
2. 通过jquery方式获取的对象为jquery对象（$( "#id" ) ），可以调用jquery定义的函数
1. 通过dom对象获取jquery对象
var jqueryObject = $( dom对象)
2. 通过html标签获取jquery对象 -- 用在向网页里添加新标签的功能，创建新标签上。
var h1 = $( "<h1>hehe</h1>" ) ;
var tag2 = $( "<div>luxw</div>" ) ;
3. 通过jquery选择器获取jquery对象 【重点】
1 ）基本选择器
$( "#id" ) -- - id选择器，根据标签的id属性值，得到标签所有对应的jquery对象 【重点】
$( ".class" ) -- 类选择器，根据标签的class 属性值获得相应的jquery对象
$( "标签名" ) -- 标签选择器，根据标签名获取jquery对象 【重点】
$( "标签名，标签名" ) -- 组合选择器
$( "*" ) -- - 全选择器
2 ）层次选择器
$( "选择符1 选择符2" ) -- 后代选择器，获取所有出现在选择器1 里的选择符2 （包括孩子和孙子. . . . . . ） 【重点】
$( "选择符1>选择符2" ) -- 孩子选择器，获取选择符1 里的选择符2 标签（只包括孩子）
$( "选择符1~选择符2" ) -- 选择符1 的后续所有兄弟选择器
$( "选择符1+选择符2" ) -- 选择符1 后的第一个兄弟标签
3 ）过滤选择器
概念：从一组jquery对象中，筛选出有用的jquery对象
基本过滤选择器
: first -- - 获取一组jquery对象中的第一个jquery对象 【重点】
: last
: not ( selector) -- - 从一组jquery对象中，排除给定的选择器
: even -- - 获取一组jquery对象中下标为偶数的jquery对象 ， 下标从0 开始
: odd -- - 获取一组jquery对象中下标为奇数的jquery对象
: eq ( index) -- 获取下标为index的jquery对象
: gt ( index) -- 大于给定下标的jquery对象 【重点】
: lt ( index)
内容过滤选择器
: contains ( text) -- - 在一组jquery对象中，获取 文本内容是text的 标签对象
: empty -- - 获取空标签对象 【重点】
: has ( selector) -- - 获取含有指定选择器的jquery对象
: parent -- - 获取有孩子节点的jquery对象
可见性过滤选择器
: hidden -- -- 获取一组jquery对象中被隐藏的标签
: visible -- -- 获取可见的jquery对象
属性过滤选择器
[ attribute] -- -- - 获取一组jquery对象中含有指定属性的标签 $( "select option[value]" )
[ attribute= value] -- - 获取一组jquery对象中的属性为value的标签对象 【重点】
$( "input[type=checkbox]" ) ， $( "input[type=checkbox]:gt(0)" )
[ attribute!= value]
表单对象属性过滤选择器
: enabled
: disabled -- - 获取一组jquery标签对象中的处于失效状态的标签
: checked -- -- 获取一组jquery对象中的被选中的标签对象 checked= true 的 【重点】
$( "input[type=checkbox]:checked" )
: selected -- - 获取一组option标签对象中的被选中的option 【重点】
获得被选中的省名称
js -- 》 var tag = document. getElementById ( "pro" ) ;
var value = tag. options[ tag. selectedIndex] . value;
jquery -- > var value = $( "#pro option:selected" ) . val ( )
4 ）表单选择器
: input $( ":input" ) -- 获取网页里的所有的input标签
: text
: pasword
: radio
: checkbox $( ":checkbox" ) < -- - > $( "input[type=checkbox]" )
$( ":checkbox:checked" ) < -- - > $( "input[type=checkbox]:checked" )
: submit
: image
: reset
jquery对象支持链式调用，可以将所有功能通过. 的方式全部缀在对象之后 obj. XX ( ) . XX ( ) . xx ( )
1. length 或者 size ( ) -- 获取一组jquery对象的个数
2. 遍历一组jquery对象 -- each ( )
语法： $( "li" ) . each ( function ( idx) {
this -- 代表当前正在被遍历的对象，是一个dom对象
} ) ;
此处idx表示正在被遍历的对象的下标
3. 获取或者设置jquery对象的属性 -- prop ( ) attr ( )
获取属性 -- jquery对象. prop ( 属性名)
设置属性 -- jquery对象. prop ( 属性名，属性值)
如果属性不存在，函数会自动为对象添加属性
删除属性 -- jquery对象. removeAttr ( 属性名)
如果需要设置多个属性 $( "#input" ) . prop ( "type" , "text" ) . prop ( "name" , "btn" ) ;
$( "#input" ) . prop ( { type: "text" , name: "btn" } ) ;
4. 获取或者设置css样式
1 ）css ( ) -- 单个设置css样式
获取 -- jquery对象. css ( "css属性名" ) ;
设置or修改 -- jquery对象. css ( "属性名" , "属性值" ) ;
2 ）关于隐藏和显示标签
hide ( time) -- 在time毫秒内隐藏jquery对象（有动画效果）
show ( time) -- 以动画效果，在time毫秒内显示一个jquery对象
3 ）关于添加一类css样式
jquery对象. addClass ( "css里的一类样式的class名" ) -- - 等价于 jquery对象. prop ( "class" , "value" ) ;
jquery对象. removeClass ( )
4 ）三个关于内容处理
html ( ) -- 设置或者获取标签体里的内容（包括子标签和文本内容），等价于js里的innerHTML
获取 -- jquery对象. html ( )
设置 -- jquery对象. html ( 内容) ;
text ( ) -- 设置或者获取标签体里的文本内容
val ( ) -- 设置或者获取表单元素的value属性值
获取 -- jquery对象. val ( )
设置 -- jquery对象. val ( 值 ) ;
1. js里的事件处理
标签式事件处理 -- - < 标签名 onclick= "fun()" >
编程式事件处理
< script type= "text/javascript" >
window. onload= function ( ) {
var tag = document. getElementById ( "btn" ) ;
tag. onclick= function ( ) { } ;
}
< / script>
jquery里的编程式事件处理
第一种： < script type= "text/javascript" >
$( document) . ready ( function ( ) { == == 》 window. onload= function{
jquery代码
} ) ;
< / script>
第二种： < script type= "text/javascript" >
$( function ( ) {
$( "#btn" ) . click ( function ( ) { } ) ;
} ) ;
< / script>
2. 复合事件处理
1 ) jquery对象. toggle ( fun1, fun2, . . . . . ) -- 循环单击事件，单击第一次执行fun1，第二次执行fun2，第三次执行fun1
2 ) jquery对象. hover ( fun1, fun2 ) -- 第一个函数表示鼠标移入是的动作，第二个函数表示鼠标移出时的动作
3. 添加标签
1 ）新建标签
var tag = $( "<div>luxw</div>" ) ;
2 ）将tag放入网页中
parentTag. append ( newTag ) ; -- > 将新标签添加到现有父标签的最后一个孩子节点
parentTag. prepend ( newTag) ; -- > 将新标签添加到父标签现有孩子节点的第一个
siblingTag. after ( newTag ) ; -- > 添加到当前标签的下一个位置，称为"弟弟" 标签
siblingTag. before ( newTag) ;
3 ) click ( ) , hover ( ) , mouseover ( ) . . . . . 只适用于网页里现有的标签对象，不适用于新添加的标签对象
解决：添加事件时，通过live ( "事件类型click，mouseover..." , fun) 解决。
4. 删除标签
1 ）删除函数
thisTag. remove ( ) -- > 删除当前标签对象
thisTag. empty ( ) -- - > 清空当前标签对象的标签体
2 ）关系函数
jquery对象. parent ( )
jquery对象. children ( ) -- > 所有孩子
jquery对象. prev ( )
jquery对象. next ( )
jquery数组. first ( )
jquery对象. last ( )
补充：
动画：
fadeIn ( ) ; 淡入
fadeOut ( ) ; 淡出
slideUp ( ) ; 隐藏
slideDown ( ) ; 显示
show ( )
hide ( ) ;
animate ( { } ) $( "#img" ) . animate ( { "height" : "100px" , "width" : "100px" } , 2000 ) ;
复习：
1. JQuery是一个基于javascript的框架
2. 搭建环境 -- 导入js文件
< script type= "text/javascript" src= "jquery1.8.3.js" > < / script>
3. 获取需要操作的标签对应的jquery对象
1 ）jquery对象和dom对象
2 ）$( dom对象 )
3 ）$( "<div>aaaa</div>" ) -- - 生成新标签
4 ）通过选择器获取jquery对象
$( "#id" ) $( "标签名" ) $( "选择器1 选择器2" )
: first : gt ( index) : empty [ attribute= value] : checked : selected
452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
