黑马程序员技术交流社区

标题: [石家庄校区]web-day04 [打印本页]

---

作者: Black_Y    时间: 2018-5-3 15:38
标题: [石家庄校区]web-day04

web-day04

# 使用JQuery完成页面定时弹出广告
# 使用JQuery完成表格的隔行换色
# 使用JQuery完成复选框的全选效果
# 使用JQuery完成省市联动效果
# 使用JQuery完成下列列表左右选择
jQuery的概述:是一个JS的框架(JS的类库)

###jQuery的引入
```html
<script src="../../js/jquery-1.11.3.min.js"></script>
```
####JQ的方法只能JQ的对象调用
####JQ与JS的转换
```html
$()   //括号内可以传js的对象,可以传选择器,可以传id等
id选择器
用法:$(“#id”)
类选择器
用法:$(“.类名”)
元素选择器
用法:$(“元素名称”)
通配符选择器
用法:$(“*”)
并列选择器
用法:$(“选择器,选择器,选择器”)
层级选择器：
后代选择器：使用空格 所有后代包含孙子及以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素:使用+  下一个同辈元素
兄弟元素:使用~  后面所有的同辈元素
【基本过滤选择器】


```

总结JQuery
```html
JQuery：
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
    * JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
    * 引入JQuery的JS.
    * window.onload和$(document).ready(function(){});区别?
        * onload页面加载完成后才会执行.执行一次
        * ready在页面的DOM树绘制完成就会执行.执行多次.
    * JS对象与JQuery对象的转换.
        * JS-->JQuery: $(JS的对象)
        * JQuery-->JS: JQ对象.get(0), JQ对象[0]
* JQuery的选择器：(*****)
    * 基本选择器：
        * ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
    * 层级选择器：
        * 空格 ,> ,+ ,~
    * 过滤:
        * :first,:last,:eq(),:even,:odd...
    * 属性选择器:
        * [属性名],[属性名=’属性值’]...
    * 表单选择器:
        * :input,:text,:password,:radio...
    * 可见性:
        *
    * 表单对象属性：
        * :checked,:selected,:enable,:disable
* JQuery实现效果:
    * show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()
* JQuery样式操作:
    * css();
* JQuery属性操作的方法:
    * attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()
* JQuery文档处理:
    * append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()
* JQuery的事件:
    * click(),change(),submit(),dblclick(),keyUp(),keyDown()...
    * toggler(),hover() ---进行事件的切换.
```

---

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

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