jQuery从零开始(一)
1.jQuery是什么?
轻量级的工具库,类库。
Jquery可以写的很少的代码,干的很多的事情。
2.学习心态,常用的功能
jQuery只是一个工具,它的实现原理还是js。以练习为主,多看多练。
常用的功能有:选取元素、eq()选择器选取带有指定index值得元素、操作元素、操作css、事件、动画、就是的特效、ajax、dom操作
3.版本
1版本:兼容性好,但是效率低
2版本:最高兼容到ie9
3版本执行效率高,但是彻底放弃了ie,ie9以下的浏览器不兼容,并且添加了很多新的方法
要根据实际情况选择合适的版本(公司的要求)
4.安装
官网下载的jQuery文件中带有min的是经过压缩的,压缩版,项目上线的时候会使用。
通过工具下载 例如:npm 、yarn ....
也可以使用CDN静态库就不用下载jQuery文件
5.核心语法
jQuery(selector).action() 简化写法 $(selector).action()
Tip:jQuery里面提供了一个api释放$符号 $.noConflict();此时$符号不能使用,此时采用Jquery替换$使用
6.文档就绪函数
js的文档就绪函数 :window.onload=function(){} 所有的文件加载完成才会执行文档就绪函数里面的代码,会因为别的代码出现错误,从而影响到,影响用户的使用 。一个网页里面出现多个文档就绪函数的时候,会出现覆盖的问题。后面的文档就绪函数会覆盖前面的文档就绪函数。
jQuery的文档就绪函数:$(document).ready(function(){//代码}) 简化写法 $(function(){ //代码部分}) 只需要等到dom结构加载完毕即可。jQuery中可以出现多个文档就绪函数,并不会出现覆盖的问题,执行的顺序就是从上到下(标准文档流的执行顺序)。
7.选择器
id class html标签
$('选择器')
$('#d1') 选中的是id值为d1的元素
$('.d2') 选中的class类名为d2的元素
$('div') 选中的是所有的div标签元素
> 选中的是子元素,其实这些和css选择器的方法很相似,几乎就是一样的。
.css() 用来改变css的样式 例如:元素.css('height','200px');
$('*') --------选中所有的元素
$(this) --------选中当前的html元素
$(“div.d1”)-------选中叫d1的div
$(“p:first”) -------选中第一个p元素
$(“ul li:first”) ------选中ul后代li里面的第一个元素
$(“[href]”) --------选中所有带有href属性的元素
$(“a[target = '_blank']”) --------选取target属性是blank的a标签
$(“a[target != '_blank']”) --------选取target属性不是blank的a标签
$('tr:even') -------------选择偶数的tr
$('tr:odd') -----------选择奇数的tr
jq的对象不可以使用js的方法
8.jQuery当中的常用事件
找到元素 绑定事件 添加事件处理函数
鼠标事件:click单击、dbclick双击、mouseenter鼠标划入、mouseleave鼠标移出、hover滑动事件、
键盘事件:keydown、keypress、keyup
表单事件:submit、change失焦触发、focus、blur、
文档/窗口事件:load加载事件、resize当窗口发生改变的时候、scroll当窗口滚动的时候、error当图片出现错误的时候
jQuery的事件具体的方法可以在w3c中查询到
9.jQuery当中的效果
显示和隐藏
hide(时间,callback回调函数) 里面可以添加两个参数第一个是过渡时间(时间可以用毫秒数,也可以用“fast”“slow”),第二个是回调函数 例如:$(selector).hide(2000,()=>{})
show(时间,callback回调函数) 用法和hide()一样
淡入淡出
fadeIn(时间,callback回调函数) 淡出、淡入 (用法和上面的hide的用法相同)
fadeOut(时间,callback回调函数)淡出
fadeToggle() 淡入淡出的取反操作 fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换(一个按钮可以解决)
fadeTo() 你想要达达到的透明度 (0-1) 三个参数 第一个参数和其他的是一样的,第二个参数数值是你想要的透明度,第三个是回调函数。(speed,qpacity不透明度,callback回调函数)
滑动效果
slideDown(speed,callback回调函数) 放下
slideUp() 收起
slideToggle() 取反(放下收起功能的集合)
动画效果
animate.css 动画包
animate不支持颜色相关的操作哦!
animate({
元素变化的代码
},时间,()=>{})
animate() 三个参数:{要变化的值} speed callback回调函数
停止动画效果
stop(stopAll,goToEnd)
stopAll:值为true 或者false ,用来表示是否清除动画队列,默认值为false。
goToEnd:是否立即完成当前的动画,默认值为false。
10.获取元素的内容
* text() 设置(可以传值)或者返回元素的文本内容 get set 合二为一了
* html()设置或者返回元素的内容 带有标签
* val() 和js的.value很相似 设置或者返回表单控件字段的值 例如:input 框里面的value值
* attr () 用于获取设置属性值(假如需要给一个标签设置多个属性值的时候,attr方法需要传入一个对象)
向网页当中添加标签(添加元素)
-----append() 在选定的元素的结尾插入指定的内容(标签的内部)
-----prepend()在被选元素内部的开头插入指定的内容(标签的内部)
-----after()在被选中元素的后面插入内容(标签的外部)
-----before()在被选中元素的前面插入内容(标签的外部)
删除元素:
remove() 删除被选元素(以及子元素) (传参数就删除参数符合的元素,不传参数就删除所有的参数)
empty() 删除被选元素的所有内容
css类的操作
addClass() 想被选元素添加一个或者多个类名
removeClass() 从被选元素中删除一个或者多个类
toggleClass() 取反 对被选元素的类操作
css() 获取或者设置被选元素的css样式
最新文章
- Ionic实战 自动升级APP(Android版)
- Windows Phone 十三、吐司通知
- Fluent NHibernate and Mysql,SQLite,PostgreSQL
- poi实现将数据输出到Excel表格当中
- 第一章:绪论-Python开发工具的安装
- boost 特点
- 程序设计C 实验三 题目九 方程式(0300)
- 初识动画animation
- Mac下一个svn提交.a文件
- <;link rel=";stylesheet"; href=";3.css";/>; 链接方式
- 基于jquery 的分页插件,前端实现假分页效果
- 统计学习方法 三 kNN
- 快学 Scala 入门 3 部曲
- python实战第一天-环境的安装
- protobuf使用详解
- Luogu4491 [HAOI2018]染色 【容斥原理】【NTT】
- Scrapy案例01-爬取传智播客主页上的老师信息
- python基础自学 第二天
- [jquery]为jQuery.ajax添加onprogress事件
- hive使用python脚本导致java.io.IOException: Broken pipe异常退出
热门文章
- 2、MVC+IOC容器+ORM结合
- Python面向对象-类、实例的绑定属性、绑定方法和__slots__
- System.InvalidOperationException: The binary operator NotEqual is not defined for the types &#39;Microsoft.EntityFrameworkCore.Storage.ValueBuffer&#39; and &#39;Microsoft.EntityFrameworkCore.Storage.ValueBuffer&#39;.
- Sunset: Nightfall Vulnhub Walkthrough
- Android动态添加碎片
- 浅谈Mysql重置密码
- python基础之字符串讲解(下)
- eclipse 的安装
- 【30天自制操作系统】day03:读写磁盘
- PLSQL设置查询快捷键