从零开始的全栈工程师——jQuery
jQuery
jq是js一个高效且精简的库( 用的多写得少 ) ,是chrome出版的。
jq内部有一个$的方法,他是jq的起始符或标识符,这个方法是用于获取元素。
下载库或者框架的方法
官网 production 发布版( ) development 开发版
window.onload=function(){}和$(document).ready(function(){})的区别?
window.onload是dom、文档、图片、资源全部加载完毕之后再执行。
$(document).ready(function(){}) 是dom、文档先加载,图片资源直接跳过。
jquery使用的是链式写法:每个方法使用完毕之后都会将前面的集合对象再次返回 所以jq才可以连缀
一、选择器:id class 标签 后代 子代 交集 并集 通配符 结构 伪类 属性 相邻(+) 兄弟(~)
相邻:.a + p (.a相邻的下一个p) 兄弟:.a ~ p( .a相邻的下面的p )
$ 是用于获取元素的方法 返回的是dom元素构成的集合对象
$("p:first-child") 第一个子元素必须是p的所有p元素
$("p:first-of-type") 子元素中的第一个p元素的所有p元素
属性选择器
input专有
$('#div p:eq(2)')表示id为div的后代元素中的第三个p元素 索引从0开始
二、效果:
事件方法中 this指向 当前绑定的元素对象 但是不能直接使用this 使用$(this)
1.fadeOut() 由可见过渡到隐藏 参数3个:过渡周期 速率( 'swing'在中间移动快,'linear'匀速 ) 回调函数
2.fadeIn() 由可隐藏渡到显示 参数3个:同上
3.fadeTo() 方法逐渐改变被选元素的不透明度为指定的值 参数4个:过渡周期(必填) 透明度(必填) 速率 回调函数
4.fadeToggle() 在 可见 和 不可见 方法之间进行切换 参数3个:过渡周期 速率 回调函数
5.hide() 方法隐藏被选元素 参数3个:过渡周期 速率 回调函数
5.show() 方法显示被选元素 参数3个:过渡周期 速率 回调函数
6.toggle() 方法在被选元素上进行 隐藏 和 显示之间的切换
7.slideDown() 向下滑动显示 参数3个:过渡周期 速率 回调函数
8.slideUp() 向上滑动隐藏 参数3个:过渡周期 速率 回调函数
9.slideToggle() slideUp() 和 slideDown() 方法之间的切换
10.animate() 方法执行 CSS 属性集的自定义动画 根据css属性来添加的 但是css属性为字符串的都添加不了比如background系列
参数4个:animate({styles},speed,easing,callback) 对象形式的CSS 过渡周期 速率 回调函数
11.stop() 方法为被选元素停止当前正在运行的动画 参数2个
三、事件
向元素添加事件处理:on bind
失去焦点事件:blur
表单内容被修改事件:change
聚焦事件:focus
点击:click
按下:mousedown
抬起:mouseup
移动:mousemove
进入:mouseenter
移出:mouseleave
悬浮:mouseove
移除:mouseout
方法触发进入和移出事件:hover
键盘按下松开:keydown
键盘按下:keypress
键盘松开:keyup
表单选择:select()
向匹配元素的当前或未来的子元素添加处理程序:delegate() $("div").delegate("p", "click", function);
从元素中返回附加数据:data() data-control='prev';
四、DOM操作
1.addClass() 向被选元素添加一个或多个类名
2.removeClass() 从被选元素移除一个或多个类
3.after() 在被选元素后插入内容
4.before() 在被选元素前插入内容
5.append() 在被选元素的结尾插入内容
6.appendTo() 在被选元素的结尾插入 HTML 元素
6.prepend() 在被选元素的开头插入内容
8.prependTo() 在被选元素的开头插入 HTML 元素
9.attr(),prop() 设置或返回被选元素的属性/值
10.css() 为被选元素设置或返回一个或多个样式属性
11.height() 设置或返回被选元素的高度
12.width() 设置或返回被选元素宽度
13.html() 设置或返回被选元素的内容
14.text() 设置或返回被选元素的文本内容
15.insertBefore() 在被选元素前插入 HTML 元素
16.insertAfter() 在被选元素后插入 HTML 元素
17.scrollLeft() 设置或返回被选元素的水平滚动条位置
18.scrollTop() 设置或返回被选元素的垂直滚动条位置
19.val() 设置或返回被选元素的属性值(针对表单元素)
五、遍历
jquery获取的对象集合是个伪数组 不能用[0]这种形式获取 必须用eq
eq() 返回带有被选元素的指定索引号的元素
add() 把元素添加到匹配元素的集合中
children() 返回被选元素的所有直接子元素,有个参数叫filter 过滤
find() 返回被选元素的后代元素,filter必填
siblings() 返回被选元素的所有同级元素
next() 返回被选元素的后一个同级元素
nextAll() 返回被选元素之后的所有同级元素
parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
prev() 返回被选元素的前一个同级元素
prevAll() 返回被选元素之前的所有同级元素
each() 为每个匹配元素添加执行函数
六、实用工具
$.each() 遍历指定的对象和数组 $.each( arr, function( index, value ){} )
$.fn.extend() 为jQuery扩展一个或多个实例属性和方法
$.extend() 将两个对象合并为一个对象
jquery官网:http://jquery.com/
jquery教程:http://www.runoob.com/jquery/jquery-tutorial.html
从零开始的全栈工程师——jQuery的更多相关文章
- 从零开始的全栈工程师——html篇1
全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块 HTML篇 html(超文本标记语言,标记通用标记语言下的一个应用.) “超文本”就是指页面内可以包含图片.链接,甚至音乐 ...
- 从零开始的全栈工程师——html篇1.2
起名方式与CSS 一.起名方式(起名方式也叫选择器) 起名的目的是为了给标签添加属性 常见的3种选择器有 标签选择器 id选择器(使用的时候加#) class选择器(使用的时候加.) 样式的 ...
- 从零开始的全栈工程师——MySQL数据库( Dos命令 ) ( phpstudy )
MySQL是一个关系型数据库,存在表的概念.结构,数据库可以存放多张表,每个表里可以存放多个字段,每个字段可以存放多个记录. phpstudy使用终端打开数据库的命令行 密码: root 数据库 查看 ...
- 从零开始的全栈工程师——JS面向对象(复习)
作用域 栈内存:js执行的环境堆内存:存放代码块的空间 存放方式 键值对形式存放 字符串的形式存放js在执行之前 浏览器会给他一个全局作用域叫window 每个作用域下都分为两个模块 一个是内存模块一 ...
- 从零开始的全栈工程师——JS面向对象(初篇)
面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式.它使用先前建立的范例,包括模块化,多态和封装几种技术.今天,许多流行的编程语言(如Java,JavaScript,C#,C+ ...
- 从零开始的全栈工程师——js篇2.5
数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单 ...
- 从零开始的全栈工程师——js篇2.1(js开篇)
JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么? 页 ...
- 从零开始的全栈工程师——html篇1.7
position定位与表单 一.position 1.Position细说 Position:relative; Left:100px; Top:100px; Position:absolute; L ...
- 从零开始的全栈工程师——html篇1.5
列表与边距探讨和行块 一.列表 1.无序列表(UL) 1)内部必须有子标签<li></li>2)天生自带内外边距 p也是自带 大家会发现用UL的时候内容前面会出现一个像这样的一 ...
随机推荐
- 老男孩Day17作业:后台管理平台编辑表格
一.作业需求: 后台管理平台 ,编辑表格: 1. 非编辑模式: 可对每行进行选择: 反选: 取消选择 2. 编辑模式: 进入编辑模式时如果行被选中,则被选中的行万变为可编辑状态,未选中的不改变 退出编 ...
- 【离散数学】 SDUT OJ 偏序关系
偏序关系 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 给定有限集上二元关系的关系矩 ...
- 一、pytest的介绍和安装
需要针对一个项目系统开发一套UI自动化测试脚本,自己结合着学习,采用了pytest去实现,这里留下记录. 什么是pytest pytest 是一个非常成熟的全功能的Python测试框架 可以胜任uni ...
- scrollView - tableView - collectionView 滚动视图的滚动速度
介绍: 每次滚动都会触发 didScroll 这个方法, 每次滚动都会有一个偏移量,滚动的快慢决定每一次偏移量的大小,可以通过两次滚动偏移量差,判断速度,从而根据速度大小对导航栏做一些操作 { CGF ...
- c#Udp分包组包方法
udp通信协议,相信大家都知道这个.由于是无连接的协议,所有udp的传输效率比tcp高.但是udp协议传输较大的数据文件得分包 最近写了个分包组包的方法,拿来和大家分享,如果有什么不妥的地方,欢迎点评 ...
- 【算法笔记】B1022 D进制的A+B
1022 D进制的A+B (20 分) 输入两个非负 10 进制整数 A 和 B (≤230−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个 ...
- BZOJ - 4260 01字典树+前后缀
题意:给定\(a[1...n]\),求\((a_i⊕a_i+1⊕...⊕a_j)+(a_p⊕a_{p+1}⊕...⊕a_{q})\)的最大值,其中\(1≤i≤j<p≤q≤n\) 前后缀最优解预处 ...
- poj1862
一.题意:两个物体m1.m2相撞后会变成一个物体,这个物体的重量会变成2*sqrt(m1*m2).有n个物体,假设只会发生两两相撞,求最后剩下的最小重量. 二.思路:简单的贪心.越大的数开越多的次方, ...
- 「BZOJ1924」「SDOI2010」 所驼门王的宝藏 tarjan + dp(DAG 最长路)
「BZOJ1924」[SDOI2010] 所驼门王的宝藏 tarjan + dp(DAG 最长路) -------------------------------------------------- ...
- 关于工具类静态方法调用@Autowired注入的service类问题
@Component //此处注解不能省却(0) 1 public class NtClient { 2 /** 3 * 日志 4 */ 5 private static String clazzNa ...