Python-jQuery

Posted 2021-01-31 天宝老爹

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

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.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() 参数同上

2 自定义动画

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