黑马程序员技术交流社区

标题: 【石家庄校区】JavaEE个人学习总结4day04 JQuery [打印本页]

---

作者: sun2ice    时间: 2018-1-23 14:59
标题: 【石家庄校区】JavaEE个人学习总结4day04 JQuery
#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对象集合中第一个元素的事件处理函数。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2