路飞学城Python-Day53

01-jquery的介绍

JS在做项目或者是实现功能的时候，用JS去操作DOM元素非常复杂，代码量大，重复性代码也多

多个元素使用for循环遍历也是非常麻烦的，对于JS使用来说加大了难度

jQuery框架是用来查询JS的，write less do more！

特点

1.容量小，轻量级框加，目前只有30KB

2.支持CSS3的选择器

3.兼容各种浏览器

What is jQuery?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

使用jQuery需要改变JS写法，原理还是用的JS，但是语法和写法是完全不同的

02-jquery文件引入和加载的区别

jQuery和JS的区别

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

DOM文档加载的步骤

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
加载图片等外部文件。
页面加载完毕

全局引用

// 如果不写window.onload(),代码的执行顺序是从上到下

window.onload = function () {

var oDiv = document.getElementById('box');

console.log(oDiv);

};

</script>

</head>

<body>

</body>

// jQuary是js的一个库，既然是库文件，那么就会抛出来一个构造函数或者对象

// 全局引用了jQuery

// 引用jQuery的时候一定要把文件先引入，再写JS代码

// 书写jQuery的方式入口函数

// $(document).ready(function () {

// // 等待文档加载完成之后就执行函数

// alert(11);

// });

$(function () {

alert('等价于加载DOM后就直接执行')

})

</script>

03-jquery的基础选择器

jQuery的选择器和css基本类似，书写方式有些不同，但是基本原理类似

<!DOCTYPE html>

<head>

<title>jQuery基础选择器</title>

</head>

<body>

<ul>

<li id="1">pandaboy0</li>

<li id="2">pandaboy1</li>

<li><a href="https://www.baidu.com">pandaboy2</a></li>

<li class="li4">pandaboy3</li>

<li>pandaboy4</li>

<li>pandaboy5</li>

<li>pandaboy6</li>

</ul>

</body>

// 回调函数

$(document).ready(function () {

//基本选择器

// 1.id选择器

// console.log($('#1'));

$('#1').css('color','red');

// 2.标签选择器

// $('a').css('color','yellow');

// 设置多个值->字典形式，设置多个值的时候使用key value的形式

$('a').css({'color':'yellow','font-size':'24px'});

// 3.类选择器

$('.li4').css('background','yellow');

// 4.通配符选择器用的很少，使用不是很频繁

// $('*').css('background','black');

});

</script>

</html>

04-jquery的层级选择器

//:first 获取第一个元素

$('li:first').text('真的吗？')

//:last 获取最后一个元素

$('li:last').html('我是最后一个元素？')

//:odd 匹配所有索引值为奇数的元素，从0开始计数

$('li:odd').css('color','green');

//:even 匹配所有索引值为偶数的元素，从0开始计数

$('li:even').css('color','red')

//:eq(index) 获取给定索引值的元素从0开始计数

$('li:eq(1)').css('font-size','30px')

//:gt(index)匹配所有大于给定索引值的元素

$('li:gt(1)').css('font-size','40px')

//:lt(index) 匹配所有小于给定索引值的元素

$('li:lt(1)').css('font-size','40px')

//一个给定索引值的元素

console.log($('p:eq(3)').text())

05-jquery的基本过滤选择器

<!DOCTYPE html>

<head>

<title>过滤选择器</title>

</style>

</head>

<body>

<ul>

</ul>

</body>

$(function () {

//获取第一个：first

//获取最后一个元素：last

//获取奇数的

$('li:odd').css('color','red');

//获取偶数

$('li:even').css('color','yellow');

$('li').css('list-style-type','none');

//选中索引值为0的元素

$('li:eq(0)').css('font-size','25px');

//选中索引值大于1的元素

$('li:gt(1)').css('font-size','30px');

//选中索引值小于1的元素

$('li:lt(1)').css({'display':'block','border':'1px solid red'})

})

</script>

</html>

06-jquery的属性选择器

<!DOCTYPE html>

<head>

<title>属性选择器</title>

</head>

<body>

<h2 class="title">属性元素器</h2>

<p class="p1">我是一个段落</p>

<ul>

<li id="li1">分手应该体面</li>

<li class="what" id="li2">分手应该体面</li>

<li class="what">分手应该体面</li>

<li class="heihei">分手应该体面</li>

</ul>

</form>

</div>

</body>

$(function(){

//标签[属性名]，查找所有含有id的该标签的元素

$('li[id]').css('color','red');

//标签[class = className]

$('li[class = what]').css({'display':'block','border':'1px red solid'});

$('li[class != what]').css('font-size','26px');

//按标签的名称开头

$('input[name ^= u]').css('background','grey');

$('input[name $= 22]').css('background','red');

$('button[class ^= btn]').css('background','red');

})

</script>

</html>

07-jquery的筛选选择器

<!DOCTYPE html>

<head>

</head>

<body>

<span>我是第一个span标签</span>

<span>我是第二个span标签</span>

<span>我是第三个span标签</span>

</p>

</div>

<ul>

</ul>

</body>

//获取第n个元素，数值从0开始

$('span').eq(1).css('color','red');

//获取第一个元素：first last

//.语法就是get方法和set方法

$('span').first().css('color','yellow');

$('span').last().css('color','grey');

$('span').parent('.p1').css({'width':'300px','height':'150px'});

//查找后代元素

$('div').find('button').css('background','red');

</script>

</html>

08-jquery对象和DOM对象的转换

<!DOCTYPE html>

<head>

<title>jQuery和DOM对象的转换</title>

#box{

width: 100px;

height: 100px;

color: #FFFFFF;

text-align: center;

}

</style>

</head>

<body>

</body>

// DOM对象转换为jQuery对象

var box = document.getElementById('box');

console.log($(box));

// jQuery对象转换为DOM对象

// 第一种方式

console.log($('button')[0]);

// 第二种方式

// $('button').get(0)

var isShow = true;

$('button').get(0).onclick = function () {

if(isShow){

$('#box').hide();

$(this).text('显示');

isShow = false;

}else{

$('#box').show();

$(this).text('隐藏');

isShow = true;

}

</script>

</html>

09-jquery效果-显示和隐藏

show

概念:显示隐藏的匹配元素语法：show(speed,callback) 参数：

speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）

callback:在动画完成时执行的函数，每个元素执行一次

hide

hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。

可以通过show（）和hide（）方法，来动态控制元素的显示隐藏

toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

slideDown

概念：通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数

用法和参数跟上面类似

slideUp

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

用法和参数跟上面类似

slideToggle

概念:通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数

跟toggle用法类似

fadeIn

概念：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化

fadeOut

概念：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo

概念：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeToggle

概念：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

实现淡入淡出的效果就是使用此方法

animate

概念：用于创建自定义动画的函数

语法：animate(params,[speed],[fn])

参数：

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每个元素执行一次。

stop

概念：停止所有在指定元素上正在运行的动画

语法：stop([clearQueue],[jumpToEnd])

参数：

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

delay

概念：用来做延迟的操作

语法：delay(1000)，一秒之后做后面的操作

<!DOCTYPE html>

<head>

<title>显示和隐藏</title>

padding: 0;

margin: 0;

}

#box{

width: 600px;

height: 600px;

margin: 0 auto;

font-size: 60px;

text-align: center;

}

#btn{

display: block;

width: 60px;

height: 60px;

margin: 0 auto;

color: #FFFFFF;

/*margin-left: 300px;*/

}

</style>

</head>

<body>

<div id="box">一个div</div>

</body>

$('#btn').get(0).onclick = function(){

$('#box').toggle(1000);

}

</script>

</html>

10-jquery的效果-slide

<!DOCTYPE html>

<head>

<title>slide</title>

#box{

width: 300px;

height: 300px;

margin: 0 auto;

text-align: center;

}

</style>

</head>

<body>

<div id="box">life is short</div>

</body>

$('#box').get(0).onclick = function () {

// $('#box').slideUp(3000);

$('#box').fadeOut(1000);

}

</script>

</html>

11-jquery的效果-fade

淡入和淡出效果

12-jquery的效果-animate

13-右下角弹出小广告

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

$(function () {

//队列式的调用，排队做事

$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {

$(this).fadeOut(1000);

});

})

</script>

</html>

14-jquery的属性操作-attr和prop

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

15-jquery的属性操作-class和值操作

attr

概念：设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候只是获取值

var id = $('div').attr('id')

console.log(id)

var cla = $('div').attr('class')

console.log(cla)

//设置值

//1.设置一个值设置div的class为box

$('div').attr('class','box')

//2.设置多个值，参数为对象，键值对存储

$('div').attr({name:'hahaha',class:'happy'})

removeAttr

从每一个匹配的元素中删除一个属性

prop

prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。

removeProp

用来删除由.prop()方法设置的属性集

addClass（添加多个类名）

为每个匹配的元素添加指定的类名。

$('div').addClass("box"):添加一个类名

$('div').addClass("box box2"):添加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的类。

$('div').removeClass('box')移除指定的类

$('div').removeClass()移除全部的类

var tag = false;

$('span').click(function(){

if(tag){

$('span').removeClass('active')

tag=false;

}else{

$('span').addClass('active')

tag=true;

}

})

toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){

//动态的切换class类名为active

$(this).toggleClass('active')

})

html

获取值：

html() 是获取选中标签元素中所有的内容

设置值：设置该元素的所有内容会替换掉标签中原来的内容

$('ul').html('<a href="#">百度一下</a>')

//可以使用函数来设置所有匹配元素的内容

$('ul').html(function(){

return '哈哈哈'

})

text

获取值：

text() 获取匹配元素包含的文本内容

设置值：

设置该所有的文本内容

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

val

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')

<!DOCTYPE html>

<head>

span.active{

font-size: 30px;

}

</style>

</head>

<body>

</div>

<ul>

</ul>

</body>

// attr()方法操作HTML属性

// attr()如果有有一个参数，表示获取值

$(function () {

$('button').click(function () {

$('#box p').text($('#box').attr('id'));

})

});

// attr设置两个值，那么久表示设置两个属性，设置多个值的话就设置成key value的形式

$('#box').attr('class', 'foo');

$('#box').removeAttr('class');

//获取的是第一个元素的class值

var i = $('li').prop('class');

// 设置值

$('li').first().prop('name','pop');

console.log( $('li').first());

// addClass() removeClss()

$('span').addClass('span2 span 3');

$('span').removeClass('span1');

var isBig = true;

$('span').click(function () {

if (isBig){

$(this).addClass('active');

isBig = false;

}else{

$(this).removeClass('active');

isBig = true;

}

//值属性的操作

})

</script>

</html>

16-操作input中的value值

17-jquery文档操作-插入节点

18-jquery文档操作-复制,替换,删除

19-jquery的位置属性

20-仿淘宝导航栏案例

21-jquery的筛选方法

22-选项卡嵌套

23-小米官网部分案例

24-焦点式轮播图

25-动态实现轮播图

26-事件流

27-jquery的事件对象和事件冒泡

28-jquery事件的绑定和移除

29-自定义事件和事件代理

30-jquery的鼠标事件一

31-jquery的鼠标事件二

32-jquery的表单事件

33-jquery的ajax技术

34-Bootstrap介绍和引入

35-响应式原理

36-Bootstrap的栅格系统介绍

37-Bootstrap的栅格系统使用

38-Bootstrap的css全局样式一

39-Bootstrap的css全局样式二

40-bootstrap组件使用一

41-bootstrap组件使用二

42-bootstrap插件介绍

路飞学城Python-Day53的更多相关文章

路飞学城—Python爬虫实战密训班第三章
路飞学城—Python爬虫实战密训班第三章一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫: - 定义调度器 - ...
路飞学城—Python爬虫实战密训班第二章
路飞学城—Python爬虫实战密训班第二章一.Selenium基础 Selenium是一个第三方模块,可以完全模拟用户在浏览器上操作(相当于在浏览器上点点点). 1.安装 - pip instal ...
路飞学城Python爬虫课第一章笔记
前言原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 之前看阮一峰的博客文章,介绍到路飞学城爬虫课程限免,看了眼内容还不错,就兴冲冲报了名,99块钱满足以下条件会返还并送书送视频. 缴 ...
路飞学城-Python开发集训-第3章
学习心得: 通过这一章的作业,使我对正则表达式的使用直接提升了一个level,虽然作业完成的不怎么样,重复代码有点多,但是收获还是非常大的,有点找到写代码的感觉了,遗憾的是,这次作业交过,这次集训就结 ...
路飞学城-Python开发集训-第1章
学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...
路飞学城-Python开发集训-第4章
学习心得: 学习笔记: 在python中一个py文件就是一个模块模块好处: 1.提高可维护性 2.可重用 3.避免函数名和变量名冲突模块分为三种: 1.内置标准模块(标准库),查看所有自带和第三方 ...
路飞学城-Python开发集训-第2章
学习心得: 这章对编码的讲解超级赞,现在对于编码终于有一点认知了,但还没有大彻大悟,还需要更加细心的琢磨一下Alex博客和视频,以前真的是被编码折磨死了,因为编码的问题而浪费的时间很多很多,现在终于感 ...
路飞学城-Python开发-第二章
''' 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家' ...
路飞学城-Python开发-第三章
# 数据结构: # goods = [ # {"name": "电脑", "price": 1999}, # {"name&quo ...
路飞学城-Python开发-第一章
# 基础需求: # 让用户输入用户名密码 # 认证成功后显示欢迎信息 # 输错三次后退出程序 username = 'pandaboy' password = ' def Login(username ...

随机推荐

00063_String类
1.String类的概述 (1)String 类代表字符串: (2)Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现: (3)字符串是常量,它们的值在创建 ...
Netty学习总结（3）——Netty百万级推送服务
1. 背景 1.1. 话题来源最近很多从事移动互联网和物联网开发的同学给我发邮件或者微博私信我,咨询推送服务相关的问题.问题五花八门,在帮助大家答疑解惑的过程中,我也对问题进行了总结,大概可以归纳为 ...
Spring Cloud-Ribbon实现客户端的服务均衡(三)
客户端负载均衡与服务端负载均衡服务端负载均衡通过服务端负载均衡设备维护的服务清单根据算法(轮训权重负载流量负载)取出服务地址进行转发客户端负载将指定服务的服务清单订单(注册中心)下来在 ...
CodeForces - 9B - Running Student
先上题目: B. Running Student time limit per test 1 second memory limit per test 64 megabytes And again ...
redis-windows上的安装与其他命令
为什么用Redis 数据库的IO是一个性能瓶颈,需要用redis来解决,100个IO并发已经很不错了,因为数据库天生就需要写磁盘,而redis不需要实时写磁盘而又可以存入数据库安装以服务的方式启动 ...
C++：探究纯虚析构函数以及实现数组的高速排序与链表的归并排序
C++:探究纯虚析构函数以及实现数组的高速排序与链表的归并排序标签: 数据结构数组链表高速排序归并排序抽象类虚继承 by 小威威 1.介绍本篇博文将通过课后作业的(15 C++ Hom ...
WinForm使用CefSharp内嵌chrome浏览器
先贴运行图:亲测可用!以图为证! 开始!1.创建winform程序,使用.NET 4.5.2或以上(vs2010最高支持.NET 4.0,我使用的是vs2017).这一步容易忽略,简单的说就是将项目. ...
UVA - 10029 Edit Step Ladders （二分+hash）
Description Problem C: Edit Step Ladders An edit step is a transformation from one word x to another ...
Java设计模式之从[星际争霸的兵种升级]分析观察者(Observer)模式
观察者模式定义对象的一种一对多的依赖关系.当一个对象的状态发生改变时.全部依赖于它的对象都会得到通知并被自己主动更新. 一个简单的样例是.在星际争霸的虫族中有一个0基础单位叫做跳狗(Zergling) ...
【有奖征资源，分享有内涵】贡献你的CSDN博文和下载资源，不断更新中
我们收集了CSDN热心博主的博文和相关下载资源.这些可爱博主上传了免积分的CSDN资源,并贡献了相关的用法,改进策略,进行了翔实的分析.感谢博主的贡献.并期待有很多其它这种好人! 我们特推出活动&q ...

路飞学城Python-Day53

What is jQuery?

路飞学城Python-Day53的更多相关文章

随机推荐

热门专题