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

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

原文地址:https://www.cnblogs.com/du-jun/p/10206421.html

时间: 01-01

Python-jQuery的相关文章

Python jquery标签云

很多知名博主都喜欢弄个标签云.今天特地看了下源码.把标签云的方法单独扣了出来.这里做一下记录 html页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

python : jquery实现左侧菜单

左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title</title> <style> .header{ background-color: black; color: wheat;

python jQuery event 取不到更改的方案(暂时)

<!--<script type="text/javascript"> $("a[id^='uid']").click(OnClick()); function OnClick(event) { //alert(event); var id=event.target.id.split('_')[1]; location.href=" Info?id="+id; }</script>--> 上面的代码发生问题,后

Python Day17(jQuery)

一.概述 1.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口

Web开发(初级)- python、JavaScript及jQuery循环语句

循环语句 一.概述 python中循环语句有两种,while,for: JavaScript中循环语句有四种,while,do/while,for,for/in jQuery循环语句each 二.python循环语句 2.1 for 循环 # a. li = [1, 2, 3, 4] for i in li:     print(i) # b. li = [1, 2, 3, 4] for i, j in enumerate(li, 1):     print(i, j)      # enume

Python开发【前端】:jQuery

jQuery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:

Python自动化开发从浅入深-进阶(script,dom,jquery 基础)

JavaScript (可以对html标签及CSS进行操作) Dom (API,提供找寻html中的标签,以便于使用JS对所找到的标签或CSS进行相应的操作) jQuery (用于将复杂的逻辑和运算封装到一个包中供外部调用) JavaScript: <srcipt>...</script> 存在的形式:文件,块 一般在body的底部书写. --- 声明变量: name = "alex" :(全局变量) var age=18:     (局部变量) --- 数字:

Python之路【第十二篇】前端之js&amp;dome&amp;jQuery

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的. 1.存在方式 <!--导入javascript脚本方法--> <script type="text/javascript" src="t1.js "></script> <!--直接在html内部编写javasc

python 学习笔记十三 jQuery案例(进阶篇)

1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> //定义css样式,自定义 .hide{ display: none; } .coating{ z-index: 1; opacity: 0.5; position: fix

python运维开发(十七)----jQuery续(示例)web框架django

内容目录: jQuery示例 前端插件 web框架 Django框架 jQuery示例 dom事件绑定 jQuery事件绑定 jQuery循环break jQuery扩展方法 jQuery自定义扩展的方法 jquery扩展实现基本验证 支持是否为空 长度 正则表达式 定义正则表达式 reg = /正则表达式/ ***** g i m ==> 特殊 利用正则匹配 reg.test(字符串) ***** reg.exec(字符串) 全局 非全局字符串三个方法: search match replac