Python-jQuery

1. jQuery是什么？

1. 是一个工具，简单方便的实现一些DOM操做
2. 不用jQuery彻底能够，可是不明智。
3. jQuery能作的事儿

1. 查找标签
2. 修改样式
3. 事件
4. AJAX （Django中讲）
5. 插件机制

4. jQuery是一个类库，相似于Python中的模块

jQuery版本
1. 压缩版和未压缩版的区别
2. 1.x和3.x均可以使用
jQuery如何使用！！！
1. 选择好版本
2. 先导入再使用

2. jQuery对象和DOM对象

jQuery对象才能调用jQuery的方法
经过jQuery选择器找到的就是jQuery对象

jQuery对象[0] --> DOM对象
$(DOM对象) --> jQuery对象

若是一个变量保存的是jQuery对象，咱们一般会给变量名添加$前缀

3. jQuery的内容

1.基本的语法：

(找标签).(要作的事儿)
$ <==> jQuery
$("选择器").方法()

2. 查找标签

// $(css选择器语法)
// eg: $('.box') 获得的是一个存放原生js对象的数组, 就是jq对象,
页面中有多少个.box, 该jq对象就承载者多少个对象,. 能够做为一个总体来使用

1. 基本选择器

1. $("#id值")
2. $("标签名")
3. $(".class名")
4. $("*")
5. $("div.c1")
6. $("div,p")

2. 层级选择器

1. $("x y")
2. $("x>y")
3. $("x+y")
4. $("x~y")

3. 基本筛选器

1. :first
2. :last
3. :eq

4. 属性选择器

1. $("input[type='text']")
...

5. 表单选择器

1. $(":checkbox")
...

6. 表单属性选择器

1. $("input:checked")
2. $(":selected")
...

7. 筛选器

1. 下一个系列
2. 上一个系列
3. 父标签系列
4. 筛选器方法系列
.first()
.eq()
...
5. 儿子们和兄弟们
6. find()和filter()

4. 操做样式

$box.css('background-color') // 获取背景颜色
$box.css('background-color', 'red') // 设置背景颜色
$box.css('background-color', function() {return 'yellow'}) // 经过函数返回值设置背景颜色

0. 操做class

1. addClass()
2. removeClass()
3. hasClass()
4. toggleClass()

1. jQuery直接修改CSS属性

$().css("color")
$().css("color", "red")
$().css({"color":"red", "font-size": "18px"})

2. 位置相关

1. offset() --> 相对窗口的偏移
2. position() --> 相对父标签的偏移
3. 返回顶部示例
1. scroll() 滚动事件
2. scrollTop() 滚动条距离顶部的偏移距离

3. 尺寸

height
width
innerHeight --> 内容+padding
outerHeight --> 内容+padding+border

4. 文本操做

1. text()
2. html()
3. val()

5. 属性操做

1. attr()
2. removeAttr()

.prop() --> checkbox和radio
全选、反选、取消的例子

6. 文档操做

1. 添加到文档内部的后面 append/appendTo
2. 添加到文档内部的前面 prepend/prependTo
3. 同级别后面 after/insertAfter
4. 同级别前面 before/insertBefore

5. empty() --> 内部的子元素都清空
6. remove() --> 把本身都删除

7. 替换 replaceWith/replaceAll

8. 克隆 clone()/clone(true)

5. 经常使用事件

0.经常使用

1. hover
2. keydown和keyup
3. change
4. focus和blur
5. input

1. 事件绑定的方式

1. click(function(){...})
2. .on("事件名称", function(){...})

2. 事件委托

语法：
.on("事件名称", "选择器", function(){...})
$('.box').on('click', 'span', {name: 'hehe'}, function(ev){})
// 注: 经过父级box来绑定点击事件,其实将事件委派给其子级span标签
特色：
1. 利用事件冒泡的特色
2. 基于一个已经存在的标签给将来的标签添加事件处理函数

3 事件对象

// 为jq事件对象, 兼容js事件对象
// 坐标: ev.clientX | ev.clientY
// 按键: ev.keyCode
// 数据: ev.data.key名 => eg:ev.data.name

4. 冒泡与默认动做

// 冒泡: ev.stopPropagation();
// 默认动做: ev.preventDefault();

5. 文档准备就绪后再执行

$(document).ready(function(){...})

6. each和data

1. each()

描述：遍历一个jQuery对象，为每一个匹配元素执行一个函数。
// 为每个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});

1. $.each()
2. jQuery对象.each()
3. 退出当前循环 return
4. 退出整个each循环 return false

 

2. data

1. 能够存字符串
2. 能够存数字
3. 能够存jQuery对象

 

在匹配的元素集合中的全部元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给全部div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—经过
.data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
$("div").removeData("k"); //移除元素上存放k对应的数据

 

6. JQ动画

1 系统预约义

// time_num: 动画持续的时间
// finish_fn: 动画结束后的回调函数

// 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle() 参数同上
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle() 参数同上

REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/8178806.html

2 自定义动画

// 参数: 作动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
width: 300,
height: 500
}, 300, 'linear', function() {
// 动画结束后回调
})
// 动画本体采用的是css动画

 

补充:插件机制(了解)