Web前端——jQuery库
Web前端笔记
第七部分：jQuery
1. jQuery介绍
jQuery是目前使用最广泛的javascript函数库。
据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。
微软公司甚至把jQuery作为他们的官方库。jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，
2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。
下载后本地使用：比如上面3.X版本，复制打开src中的地址：https://code.jquery.com/jquery-3.4.1.js
复制存储为本地的js文件，然后放在HTML里面的js文件夹中，然后引用即可
2. jQuery和原生js加载模块写法区别
原生js写法：
window.onload = function () {
var oDiv = document.getElementById(‘div1’);
alert(‘原生JS弹出的’ + oDiv);
}jquery完整写法：
/使用jquery的写法，$(document).ready相当于上面的window.onload/
/表示当前页面节点都加载完毕，才执行ready括号里面的内容/
$(document).ready(function () {
var $div = $(’#div1’);
alert(‘jquery弹出的’ + $div); /jquery写在后面但是弹出来在前面，速度更快/
})jquery简写：
/jquery上面ready完整写法的简写, ( d o c u m e n t ) . r e a d y ( ) 简 写 为 (document).ready()简写为 (document).ready()简写为()/
$(function () {
var $div = $(’#div1’);
alert(‘jquery简写弹出的’ + $div);
})/ready比onload快的原因：/
/onload标签和标签里面数据都加载完毕(类似于网页渲染)才开始运行内部函数，/
/ready只要标签加载完毕就开始运行了，速度更快/jquery有容错机制
- 样式名称可以使用短横线(css中原始写法)也可以写成匈牙利命名(原生js中写法)
- 宽度高度等数字后面的px可以省略，不写px就不写引号，要写px就要加上引号
3. jQuery选择器
jquery用法思想一
选择某个网页元素，然后对它进行某种操作注意jQuery选择器，选择样式时候需要和样式写法一模一样，盒子样式前面需要.点
- 但是使用属性或者修改样式属性时候.不需要，直接使用名称
jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(’#myId’) //选择id为myId的网页元素
$(’.myClass’) // 选择class为myClass的元素
$(‘li’) //选择所有的li元素
$(’#ul1 li span’) //选择id为为ul1元素下的所有li下的span元素
$(‘input[name=first]’) // 选择name属性等于first的input元素对选择集进行过滤
$(‘div’).has(‘p’); // 选择包含p元素的div元素
$(‘div’).not(’.myClass’); //选择class不等于myClass的div元素
$(‘div’).filter(’.myClass’); //选择class等于myClass的div元素
$(‘div’).eq(5); //选择第6个div元素------最常用的选择集转移
$(‘div’).prev(); //选择div元素前面紧挨的同辈元素
$(‘div’).prevAll(); //选择div元素之前所有的同辈元素
$(‘div’).next(); //选择div元素后面紧挨的同辈元素
$(‘div’).nextAll(); //选择div元素后面所有的同辈元素
$(‘div’).parent(); //选择div的父元素--------------------------常用
$(‘div’).children(); //选择div的所有子元素---------------------常用
$(‘div’).siblings(); //选择除本div的其它同级元素-----------------------常用
$(‘div’).find(’.myClass’); //选择div内的class等于myClass的元素判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
var $div1 = $(’#div1’);
var $div2 = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div2'); alert…div1.length); // 弹出1
alert($div2.length); // 弹出0
…这是一个div
4. jquery样式操作
jquery用法思想二
同一个函数完成取值和赋值操作行间样式
// 获取div的样式
$(“div”).css(“width”);
$(“div”).css(“color”);//设置div的样式
$(“div”).css(“width”,“30px”);
$(“div”).css(“height”,“30px”);
$(“div”).css({fontSize:“30px”,color:“red”});特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。操作样式类名
$("#div1").addClass(“divClass2”) //为id为div1的对象追加样式divClass2
$("#div1").removeClass(“divClass”) //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass(“divClass divClass2”) //移除多个样式
$("#div1").toggleClass(“anotherClass”) //重复切换anotherClass样式
5. jQuery特殊效果-动画
常用动画
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素传入动画播放时间，swing不写就是默认该参数，可以传入一个回调函数
回调函数是动画执行完毕后要执行的函数
$btn.click(function(){$(’#div1’).fadeIn(1000,‘swing’,function(){
alert(‘动画结束了!’);
});
});
6. jquery链式调用
- 多个功能可以写在一句代码中，比如009案例
$(this).addClass(‘current’).siblings().removeClass(‘current’);
d i v . e q ( div.eq( div.eq((this).index()).addClass(‘active’).siblings().removeClass(‘active’); - jquery链式调用可以提高效率
- 比如下面就是一个链式调用：(可以换行书写，中间都是.连接)
$(’#div1’) // id为div1的元素
.children(‘ul’) //该元素下面的ul子元素
.slideDown(‘fast’) //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children(‘ul’) //这些兄弟元素中的ul子元素
.slideUp(‘fast’); //高度实际高度变换到零来隐藏ul元素
7. jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
函数是一个回调函数，可以不断的传入动画，就可以实现无限的动画
元素的属性可以传入数学表达式，通过表达式对属性进行有规律的修改
css3和jquery中动画对比
- 动画本质一样，都是两个状态之间切换的效果
- css3中需要定义from起始状态到to终点状态，然后设置过渡动画效果
- jQuery本身的css样式就是起始状态，只需要在函数中定义终点状态和动画效果
- 参考04文件夹中的007和07文件夹中的013对比
8. 获取尺寸、滚动事件
css获取属性时候，是使用的字典写法
比如获取字体尺寸
var sTr = d i v 1. c s s ( ′ f o n t − s i z e ′ ) ; 我 们 这 里 获 取 尺 寸 直 接 使 用 div1.css('font-size'); 我们这里获取尺寸直接使用 div1.css(′font−size′);我们这里获取尺寸直接使用div1.width() 注意要写上小括号1、获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height2、获取元素相对页面的绝对位置
offset()3、获取浏览器可视区宽度高度
$(window).width();
$(window).height();4、获取页面文档的宽度高度
$(document).width();
$(document).height();5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();6、页面滚动事件
$(window).scroll(function(){
…
})
9. jquery属性操作，循环操作
1、html() 取出或设置html内容
类似原生JS中的innerHtml
/写(修改)元素的内容/
oDiv.innerHTML = “修改标签内部的内容”;// 取出html内容
var $htm = $(’#div1’).html();// 设置html内容
$(’#div1’).html(‘添加文字’);2、prop() 取出或设置某个属性的值
// 取出图片的地址
var $src = $(’#img1’).prop(‘src’);// 设置图片的地址和alt属性
$(’#img1’).prop({src: “test.jpg”, alt: “Test Image” });jquery循环
对jquery选择的对象集合分别进行操作，
需要用到jquery循环操作，此时可以用对象上的each方法
10. jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单 （input的提交按钮,点击提交触发的事件，默认提交数据到数据库）绑定事件的其他方式
bind第一个参数，传入事件名称，可以同时传入多个触发事件，第二个参数就是匿名函数
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').bind('mo…(this).html());
});
});取消绑定事件
$(function(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').bind('mo…(this).html());// $(this).unbind();$(this).unbind('mouseover');});});
11. 事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，
那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，
那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），
最上级div上面一般是body,或者它到达了对象层次的最顶层(html标签)，即document对象（有些浏览器是window）。// 事件一直会向上传，子级向父级，父级在向自己的父级，直到最顶层
// 传递事件的顺序是按照标签的级别循序，一级一级向上传递
// 父级有的同类事件都会自动激活执行，没有的话就继续向上执行- 参考实例025
事件冒泡的作用
事件冒泡允许多个操作被集中处理
（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），
它还可以让你在对象层的不同级别捕获事件。阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止阻止默认行为，即阻止表单默认提交行为，因为默认点击表单的提交，会提交数据到到数据库
event就是指的该事件对象，此处指的就是提交事件
$(’#form1’).submit(function(event){
event.preventDefault() // 阻止表单默认提交行为
})- 实际开发，不是使用默认提交，而是使用ajax进行数据提交，就需要阻止默认行为
合并阻止操作
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用// event.stopPropagation(); 阻止事件冒泡
// event.preventDefault(); 阻止默认行为（默认表单提交事件）// 上面两句的合并写法，event对象就不用写了：
return false; --------实际开发写这句即可，上面两句一般不用
12. 事件委托
- 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，
- 事件委托的好处：
1、事件委托首先可以极大减少事件绑定次数，提高性能
2、其次可以让新加入的子元素也可以拥有相同的操作(后面添加的子元素一样可以执行已经委托的事件)
3、简化代码 - 事件委托的写法
$(function(){
$list = $(’#list’);
// $list是父级元素，li是委托的子元素，click是委托的事件
// $(this)即要执行事件的子元素
// 有三个参数：传入子元素标签的名称，要绑定的事件，然后事件发生时候要执行的函数
$list.delegate(‘li’, ‘click’, function() {
$(this).css({background:‘red’});
});
})
…- 1
- 2
- 3
- 4
- 5
13. jquery元素节点操作
创建节点
var $div = $(’’);
var $div2 = $(‘这是一个div元素’);
插入节点
1、append()和appendTo()：在现存元素的内部，从后面插入元素
var $span = $(‘这是一个span元素’);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').append(span);
…2、prepend()和prependTo()：在现存元素的内部，从前面插入元素
3、after()和insertAfter()：在现存元素的外部，从后面插入元素
4、before()和insertBefore()：在现存元素的外部，从前面插入元素删除节点
$(’#div1’).remove();
14. 滚轮事件与函数节流
- 鼠标滚轮事件需要使用jquery.mousewheel插件
- jquery.mousewheel插件使用
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，
可以使用jquery的滚轮事件插件jquery.mousewheel.js
将该js插件文件放在js文件中，先引入jQuery文件，然后引入该插件 - 函数节流
javascript中有些事件的触发频率非常高，触发事件的动作会触发很多次(滚动鼠标会触发多次)
比如onresize事件(jq中是resize)，
onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，
在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。- 使用定时器减少触发次数，参考案例037
15. jquery动画
// css3实现动画使用的hover伪类的transition动画或者animation动画(定义一个动画函数的from起点状态to终点状态)
// jquery可以直接将动画样式添加到盒子上去即可，代码更加的简单
// 盒子最初有一个样式，jQuery函数加上了一个样式，两个样式之间就形成了动画// 网页打开时候，有一个样式，然后我们添加一个样式，相当于就有了一个起点和一个终点的变化
// 两个样式的变化就可以形成一个动画,也可以直接使用transform变形，只需要写一个新样式(里面写变形终点状态即可，起点相对于css3可以省略，css3中起点一般写上不然容易出现bug)
// 原来的样式本身里面就放有transition动画代码，只要有样式变化都会有动画显示，transition:all 1000ms ease;
// 新的样式一般使用addClass()方法加上去，该方法激活的方法，可以是点击事件，滚动事件，鼠标移入等事件// 一般将终点样式，直接使用原始样式前面加一个动画名称，
比如 本来样式是.box 动画终点的样式.moving .box ，.moving样式加在父级上
此时终点样式的权限是大于初始状态的，样式就会被修改掉，两个样式就产生了动画效果
.box中任何属性的变化都可以产生动画效果，相对于css3中的动画设置可以更加的灵活- 参考案例036/037
Web前端——jQuery库相关推荐
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- 【懒人笔记】Web前端开发库
项目需要一个页面展示,于是我冒充了2个月的 Web前端,这里记录下用到的相关工具和库. Web框架 用的是 Django,不得不说,对于我这样的前端小白来说,上手容易很多.也让我进一步了解到 Pyth ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- WEB前端.jQuery
持续更新呢,莫(mo)急(yu)....ヽ(￣▽￣)ﾉヽ(￣▽￣)ﾉ 后续会补全代码块注释,并加入body标签内容 篇首节 README: 定位:WEB前端 目的:适合有jQuery知识基础萌新阅读. ...
- Web前端 jQuery
1.初始jQuery 1.1.jQuery是什么? jQuery由美国人John Resig于2006年创建,jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"wr ...
- Web前端-jQuery
目录 1 前言 2 概述 2.1 jQuery是什么 2.2 jQuery在js中的使用 2.3 dom对象和jQuery对象 3 jQuery的基本语法 3.1 选择器 3.2 表单选择器 3.3 ...
- web前端——jQuery
jQuery使用 推荐: 官网 CDN(内容分发网络) 引用 引入位置放在js代码上面 百度CDN <head> <script src="https://apps.bdi ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- Web前端—— JQuery迷你版实现以及使用
JQuery迷你版实现以及使用 tiny_jquery.js var $ = function (selector) {var ele = document.querySelector(selecto ...
最新文章
- hdu2.1.2 How many prime numbers(计算素数的个数)
- UISegmentedControl swift
- 1075 链表元素分类 （25 分）
- dede列表页if判断输出html,首页、列表页调用文章body内容的两种方法
- 信息学奥赛一本通（1092：求出e的值）
- 动态规划 —— 背包问题 —— 背包问题模版
- 爬虫之操作excel
- python3.8对应django版本_Python Django 版本对应表
- 【非科班告诉你】前端自学从小白到入门
- Python+Django+SAE系列教程6-----本地配置Django
- 可穿戴设备的发展与挑战
- 史蒂夫 乔布斯：遗失的访谈
- 田口设计（正交设计）——参数设置方法
- 2019三星比2018好在哪_【三星w2019和w2018参数对比资讯】三星w2019和w2018参数对比足球知识与常识 - 足球百科 - 599比分...
- 计算机文件夹添加密码,电脑如何给文件夹设置密码
- 牛客网练习—《网络基础》DAY4
- class与subclass分析
- 《计算机科学概论（第12版）》—第1章1.10节通信差错
- 【零基础学STM32】CubeMX+HAL 喂狗小教程
- pat乙级练习记录-1017