首页 > 编程语言> 文章详细

Python-jQuery

2019-01-01 23:03:31 阅读：212 来源： 互联网

标签：

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: 动画结束后的回调函数

2 自定义动画

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

标签：
来源： https://www.cnblogs.com/du-jun/p/10206421.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9