【前端】之jQuery基础知识
jQuery 简介
- 在项目中引入jQuery:
- 去jQuery官网下载jQuery包:jquery-3.2.1.min.js
- 将下载的jQuery包添加到项目目录中
- 在标签下添加jQuery引用:
<script src='jquery-3.2.1.min.js'></script>
- jQuery和$没有区别,具体体现在:
console.log($===jQuery)
返回true
$('div')
和jQuery('div')
效果相同
- jQuery文件的差异:
- jquery-xx.js:代码格式清晰,可读性高,参数命名规范,建议在开发时使用
- jquery-xx.min.js:代码格式混乱,可读性差,参数命名不规范,但占空间小,建议发布上线时使用
- jQuery的特性:
- 链式编程:jQuery中的不同方法可以在一条语句中相继进行
- jQuery中的所有设置方法,最后都会
return this;
- jQuery中的所有获取方法,最后都会
end();
,返回匹配元素之前的状态
- jQuery中的所有设置方法,最后都会
- 隐式迭代:jQuery可以直接在数组对象上进行操作,而不需要遍历数组中的每一个元素
- 链式编程:jQuery中的不同方法可以在一条语句中相继进行
jQuery 基础语法
- 入口函数(写法1):
$(document).ready(function() { ...... });
- 入口函数(写法2):
$(function() { ...... });
- 页面加载完成后执行的方法:
$(window).ready(function() { ...... });
- 获取元素:
var jqdom = $('div/.box/#box01');
- 元素的点击事件:
jqdom.click(function() { ...... });
- 显示元素:
jqdom.show();
- 在1秒钟的动画之后显示元素:
jqdom.show(1000);
- 隐藏元素:
jqdom.hide();
- 在1秒钟的动画之后隐藏元素:
jqdom.hide(1000);
- 设置innerHTML:
jqdom.html('hahahaha');
- 为元素设置样式(JSON):
jqdom.css({"width":100,"background-color":"red"});
- each遍历:
$('li').each(function(index, element){ ...... });
jQuery 和JS中DOM的区别
- 使用原生JS获取到的DOM就是DOM对象本身
- 使用jQuery获取到的DOM是一个数组,DOM对象仅仅是这个数组中的一部分
- 原生JS和jQuery中DOM的转换:
- 原生JS对象转换成jQuery对象:
jqdom = $(jsdom);
- jQuery对象转换成原生JS对象:
jsdom = jqdom[0];
或者jsdom = jqdom.get(0);
- 原生JS对象转换成jQuery对象:
jQuery 选择器
- 基本选择器:
$("div")
、$(".box")
、$("#box01")
- 层级选择器:
$("#box01 li")
、#box01>ul>li
- 过滤选择器:
$("li:eq(2)")
、$("li:odd")
、$("li:even")
- 筛选选择器:
- $("#box01").find("li"):获取id为box01的盒子中的所有li标签(子子孙孙都算)
- $("#box01").children():获取id为box01的盒子的所有子元素(仅子元素)
- $("#box01").children("ul"):获取id为box01的盒子的ul子元素(仅子元素)
- $("#box01").children().eq(2):获取id为box01的盒子下的第二个子元素(仅子元素)
- $("#box01").siblings():获取id为box01的盒子的所有兄弟元素
- $("#box01").next():获取id为box01的盒子的下一个兄弟元素
- $("#box01").prev():获取id为box01的盒子的上一个兄弟元素
- $("#box01").parent():获取id为box01的盒子的父元素
jQuery 样式操作
- 设置单个样式:
$("#box01").css("color", "red");
- 设置多个样式:
$("#box01").css({"color":"red", "width":100});
- 获取样式值:
var width = $("box01").css("width");
- 添加类样式:
$("#box01").addClass("myClass");
- 移除类样式:
$("#box01").removeClass("myClass");
- 有无类样式:
var flag = $("#box01").hasClass("myClass");
- 切换类样式:
$("#box01").toggleClass("myClass");
jQuery 属性操作
- 添加属性:
$("li").attr("aaa", 111);
- 获取属性:
var aaa = $("li").attr("aaa");
- 移除属性:
$("li").removeAttr("aaa");
- 当涉及到值为boolean类型的属性时,需要使用
$("checkbox").prop("checked", true);
- 获取表单value属性的值:
$("input").val();
- 设置表单value属性的值:
$("input").val("XXXX");
- 获取表单中的文本:
$("input").text();
- 设置表单中的文本:
$("input").text("XXXXX");
jQuery 尺寸位置操作
- 获取宽度:
var width = $("div").width();
- 设置宽度:
$("div").width(200);
- 获取高度:
var height = $("div").height();
- 设置高度:
$("div").height(200);
- 上面方法获取到的宽度和高度与padding、margin、border均无关
- 获取距离网页顶端/左端的距离:
var top/left = $("div").offset().top/left;
- 获取距离父盒子顶端/左端的距离:
var top/left = $("div").position().top/left;
,只与left、top属性有关,与margin、padding都无关 - offset和position只能获取,不能设置
- 获取页面被卷去的距离:
var top/left = $(document).scrollTop()/scrollLeft();
- 设置页面被卷去的距离:
$(document).scrollTop(100)/scrollLeft(100);
jQuery 动画
- 显示/隐藏动画:
- 显示、隐藏的方法:
show()
、hide()
、toggle()
,可以有很多参数种类 $("#box01").show();
:直接显示$("#box01").show(1000);
:通过一个1秒的动画显示出来$("#box01").show("fast");
:可以填入fast、normal和slow$("#box01").show(XX, function() { ...... });
:显示完成后回调函数
- 显示、隐藏的方法:
- 滑入/滑出动画:
- 滑入、滑出的方法:
slideDown()
、slideUp()
、slideToggle()
- 滑入、滑出操作中的参数种类与显示、隐藏操作中的相同
- 滑入、滑出的方法:
- 淡入/淡出动画:
- 淡入、淡出的方法:
fadeIn()
、fadeOut()
、fadeToggle()
- 淡入、淡出操作中的参数种类与显示、隐藏操作中的相同
- 这里可以支持设置淡入/淡出的透明度,方法:
fadeTo(XX, 0.5, function() { ... })
- 淡入、淡出的方法:
- 自定义动画:
- 语法:
JQ对象.animate(参数JSON串, 毫秒值, 回调函数);
- 当前jQuery版本支持的参数见这个网页
- 语法:
- 停止动画:
- 停止动画的方法:
stop()
,可以有两个参数,如果不写,则默认都是false - 第一个参数:后续动画是否不再执行
- 第二个参数:是否要执行完当前动画
- 停止动画的方法:
jQuery 节点操作
- 创建节点:
- 方法1:
var node = $("\<li\>哈哈哈\<\/li\>");
- 方法2:
var node = $("ul").html("\<li\>嘻嘻嘻\<\/li\>");
- 方法1:
- 添加节点:
- 方法1:
$("ul").append(newLi);
,将新元素添加到容器最后面 - 方法2:
newLi.appendTo($("ul"));
- 方法3:
$("ul").prepend(newLi);
,将新元素添加到容器最前面 - 方法4:
newLi.prependTo($("ul"));
- 方法5:
$("oldLi").after(newLi);
,将newLi添加到oldLi之后 - 方法6:
$("oldLi").before(newLi);
,将newLi添加到oldLi之前
- 方法1:
- 清空节点:
- 方法1:
$("ul").html("");
- 方法2:
$("ul").empty();
- 方法3:
$("li").remove();
,这种方法用于自己清除自己
- 方法1:
- 复制节点:
var newNode = oldNode.clone();
jQuery 事件机制
- 事件绑定:
- 简单事件绑定:与JS中的方法相同,去掉on,改成方法,如
onclick -> click()
- bind方式绑定事件:
$('.box').bind('click mouseenter', function() { ...... });
- delegate方式绑定事件:
$(document).delegate('.box', 'click mouseenter', function() { ...... });
- on方式绑定事件:
- 语法:
$(父容器).on('事件', '子元素', JSON串, function(event) {})
,代码如下:$(document).on('click mouseenter', '.box', {'name': 111}, function(e) {
alert(e.data.name); // 通过event.data可以获取JSON串中传递的参数
});
- 子元素参数可以不写,如果不写,则视为父容器触发事件
- JSON串参数可以不写,如果不写,则视为没有传递参数
- 语法:
- 简单事件绑定:与JS中的方法相同,去掉on,改成方法,如
- 事件解绑:
- unbind方式解绑事件:
$('.box').unbind('mouseenter');
- undelegate方式解绑事件:
$(document).undelegate('.box', 'mouseenter');
- off方式解绑事件:
$('document').off('mouseenter', '.box');
- 一般情况下,bind与unbind、delegate与undelegate、on与off是一一对应的
- unbind方式解绑事件:
- 事件触发:
- 事件触发:当达到某种要求之后触发事件
- 语法1:
$('.box').click();
,这种方法只能触发系统方法,如click等 - 语法2:
$('.box').trigger('myevent');
,这种方法可以触发自定义方法,代码如下:var num = 0;
var timer = null;
$(document).ready(function() {
$('div').on('myevent', function() {
alert('number reached 30...');
});
timer = setInterval(function() {
console.log(1);
num++;
if(num === 30) {
$('div').trigger('myevent');
}else if(num > 30) {
clearInterval(timer);
}
}, 100);
});
- 语法3:
$('.box').triggerHandler('focus');
,同trigger,但不会触发浏览器默认事件 - 以上三种触发方法中,第一、第二种会触发浏览器事件,第三种不会触发浏览器事件
- 触发浏览器事件:例如语法3中的focus,当用前两种方法触发后,会执行focus方法获取焦点,而使用第三种方法触发后,不会执行focus方法获取焦点
- jQuery事件对象:
$(document).on('click', '.box', {}, function(e) {});
,一些事件对象如下- e.data:传入事件的参数
- e.currentTarget:触发事件的元素,jQuery的DOM对象
- e.target:触发事件的元素,javascript的DOM对象
- e.pageX和e.pageY:发生事件时鼠标距离文档顶部和左部的距离
- e.type:事件类型,click、mouseenter等
- e.which:鼠标按键类型,左键1,中键2,右键3
- e.keyCode:按下键盘的键值,如果没有按键盘则返回undefined
jQuery 多库共存
- 多库共存:当多个库中的类型或方法发生冲突时,需要用到多库共存
- 例如:当项目中有多个jQuery版本时,版本之间会发生覆盖(通常是最后定义的版本覆盖之前的所有版本),如果想要使用之前版本的特性,则需要设置当前版本放弃某个类型或方法的使用权
- 多库共存的解决方案代码(本例中设置对
$
的使用权):var my$ = $.noConflict(true);
// 让当前版本放弃$符的使用权,同时将当前版本的$符号重定义为my$
// 以后如果想用当前版本的$功能,则可以使用my$代替,如:my$(document)
- 补充:查看某方法或类型的版本(如$):
console.log($.fn.jquery);
jQuery 插件
- 可以去这个网站搜索、下载搜许插件
- 例如:原生jQuery不支持颜色变换动画,因此,我们需要使用插件来实现这个功能
- 在网站搜索框中输入
颜色动画
,点击搜索,即可看到所有颜色动画插件 - 每个插件中都有演示按钮,点击可以查看插件效果
- 点击
立即下载
即可下载插件 - 下载后解压,用Sublime等工具打开index.html文件,查看插件用法
【前端】之jQuery基础知识的更多相关文章
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- JQuery基础知识(1)
JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的 ...
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 0417 jQuery基础知识
jQuery基础知识 jQuery需要引入一个js文件,并且这个文件在所有js代码之前(包括引入的其他js文件) 基础操作(对比js): 1.找标签: js:document.getElement.. ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- 【Python全栈-jQuery】jQuery基础知识
前端学习之jQuery 一. jQuery是什么? <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. < ...
- jQuery基础知识准备
一. 代码风格在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号"$"来起始的.而这个"$"就是jQuery当中最重要且独有的对象:jQu ...
随机推荐
- 第七篇 Flask实例化配置及Flask对象配置
一.Flask对象的配置 Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? 它能给我们带来怎么样的方便呢? ...
- iOS开发 swift 3dTouch实现 附代码
iOS开发 swift 3dTouch实现 附代码 一.What? 从iphone6s开始,苹果手机加入了3d touch技术,最简单的理解就是可以读取用户的点击屏幕力度大小,根据力度大小给予不同的反 ...
- 深入理解Kafka必知必会(上)
Kafka的用途有哪些?使用场景如何? 消息系统: Kafka 和传统的消息系统(也称作消息中间件)都具备系统解耦.冗余存储.流量削峰.缓冲.异步通信.扩展性.可恢复性等功能.与此同时,Kafka 还 ...
- 泛微e-cology OA系统远程代码执行漏洞及其复现
泛微e-cology OA系统远程代码执行漏洞及其复现 2019年9月19日,泛微e-cology OA系统自带BeanShell组件被爆出存在远程代码执行漏洞.攻击者通过调用BeanShell组件中 ...
- Mybaits 源码解析 (九)----- 全网最详细,没有之一:一级缓存和二级缓存源码分析
像Mybatis.Hibernate这样的ORM框架,封装了JDBC的大部分操作,极大的简化了我们对数据库的操作. 在实际项目中,我们发现在一个事务中查询同样的语句两次的时候,第二次没有进行数据库查询 ...
- Java自动化测试框架-10 - TestNG之测试结果篇
1.-测试结果 1.1-成功,失败和断言 测试被认为是成功的,如果它不引发任何异常完成,还是它扔的预期异常(请参阅文档expectedExceptions属性上找到的@Test注释). 您的测试方法通 ...
- 在线WEB开发编辑器,edt.df5d.com
在线WEB开发编辑器,http://edt.df5d.com 本地服务端下载 : https://pan.baidu.com/s/11SlcoU_D-KbzGFbs-_9Dpg 即可加载本地磁盘,也可 ...
- 模拟示例raid 5(5块磁盘 3块做raid 2块做备份 ) raid 10(5块磁盘) 修改版
RAID5:需要至少三块(含)硬盘,兼顾存储性能.数据安全和储存成本. RAID10:需要至少四块(含)硬盘,兼具速度和安全性,但成本很高. raid 10(5块磁盘) 1.添加硬盘设备(添加5块) ...
- php Yaf_Loader::import引入文件报错的解决方法
php Yaf_Loader::import引入文件报错的解决方法 改下配置文件就行<pre>yaf.use_spl_autoload=1</pre> 也可以PHP动态修改 毕 ...
- python中字符串常见操作(二)
# 可迭代对象有:字典,列表,元组,字符串,集合 str1 = '192.168.1.1' str2 = 'as df gh jk' str3 = '小李子' str4 = ['aa','bb','c ...