路飞学城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 ...

随机推荐

阿里云全部端口port
lucene_05_solr配置
什么是solr Solr.是Apache 下的一个顶级开源项目,采用Java 开发,它是基于Lucene 的全文搜索服务器.Solr 提供了比Lucene 更为丰富的查询语言,同时实现了可配置.可扩展 ...
cannot find -lGL
解决方法: 以下操作都在root权限下进行! 1.按照提示安装对应的库文件,fedora安装库件的格式:yum install libxxx(你要装的库),如果已经安装GL库,会显示已经安装 Ps:如 ...
@Zookeeper可视化工具。 ZK 安装 node-zk-browser。2015.10.22亲测可用
zookeeper基本是基于API和console进行znode的操作,并没有一个比较方便的操作界面,这里也发现了taobao 伯岩写的一个工具,可以比较方便的查询zookeeper信息. 工具的开发 ...
[Javascript] Understand common misconceptions about ES6's const keyword
Values assigned with let and const are seen everywhere in JavaScript. It's become common to hear the ...
ant整合junit自己主动化測试
一. 使用Junit进行測试 1. Java业务代码: public class HelloWorld { // 測试返回"world" public String hello() ...
python中获取当前路径【os模块】
本机windows,文件目录F:\python\ClStudyDemo\osTest.py os.path.realpath(_file_)——返回真实路径 os.path.split()——返回路径 ...
不使用系统自带的button
// // LKTitleBtn.m // 01-彩票 // // Created by Lenny on 3/17/15. // Copyright (c) 2015 Lenny. All ...
301 和 302 对 SEO 的影响
网站优化中,经常会面临网站链接修改或改变的事情,其中一个解决办法就是使用网站跳转的方式,处理变化的链接,下面讲述301和302跳转对SEO的影响. 301(永久移动) 请求的网页已被永久移动到新位置. ...
leetCode(30):Sort Colors
Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

路飞学城Python-Day53

What is jQuery?

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

随机推荐

热门专题