#day04 JQuery
##JQuery的概述
* JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.
* JS的常用的框架:
* JQuery,ExtJS,DWR,Prototype...
* JQ的使用:
* 主要学习JQuery的语法.
##引入Jquery的js文件.
<script src="../../js/jquery-1.11.3.min.js"></script>
##JQuery的简单入门
* JQuery的入口函数与传统的JS方式不同:
* window.onload 等页面加载完成后执行该方法. 执行一次
* $(function(){}):等页面的DOM树绘制完成后进行执行.执行多次 效率更高
##JS对象和JQ对象的转换
* JS对象转成JQ对象 `$(JS的对象)`
* 将JQ的对象转成JS对象 ` JQ对象.get(0), JQ对象[0]`
##JQ显示和隐藏
```
* show();
* hide();
* slideDown(); --向下滑动
* slideUp(); --向上滑动
* fadeIn(); --淡入
* fadeOut(); --淡出
* animate(); --自定义动画
```
##JQuery基本选择器
* id选择器
* `用法:$(“#id”)`
* 类选择器
* `用法:$(“.类名”)`
* 元素选择器
* `用法:$(“元素名称”)`
* 通配符选择器
* `用法:$(“*”)`
* 并列选择器
* `用法:$(“选择器,选择器,选择器”)`
##JQuery层级选择器
* 后代选择器： `使用 空格 所有后代包含孙子及以下的元素`
* 子元素选择器：`使用 > 第一层的元素（儿子）`
* 下一个元素: `使用 + 下一个同辈元素`
* 兄弟元素: `使用 ~ 后面所有的同辈元素`
##JQuery常用过滤选择器
* 获取第一个元素`:first $('li:first');`
* 获取最后个元素`:last $('li:last')`
* 匹配所有索引值为偶数的元素`:even $("tr:even")`
* 匹配所有索引值为奇数的元素`:odd $("tr:odd")`
* 匹配一个给定索引值的元素`:eq $("tr:eq(1)")`
* 匹配包含给定文本的元素`:contains(text) $("div:contains('John')")`
* 匹配给定的属性是某个特定值的元素`[attribute=value] $("input[name='name']")`
## 属性选择器:
* `[属性名],[属性名=’属性值’]...`
## 表单选择器:
* `:input,:text,:password,:radio...`
##表单对象属性：
* `:checked,:selected,:enable,:disable `
##JQuery对属性的操作的方法
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
##JQuery的DOM操作
* 常用方法
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
* 遍历的方式一：
`$.each(objects,function(i,n){});`
* 遍历的方式二:
`$(“”).each(function(i,n){ });`
##JQuery的事件:
* `click(),change(),submit(),dblclick(),keyUp(),keyDown()...`
* `hover() ---进行事件的切换.`
```
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
```
##trigger和triggerHandler区别
* trigger
* 触发指定的事件类型上所有绑定的处理函数 包括浏览器的默认事件
* triggerHandler
* 第一，他不会触发浏览器默认事件。
* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。
|
|
收藏
淘帖
踩
