Python全栈开发之路 【第十五篇】：jQuery的介绍和选择器
本节内容
什么是jQuery?
write less,do more.
jQuery是一个快速，小巧，功能丰富的JavaScript库。
它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。
通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。
封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。
关于jQuery的相关资料：
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/
学习jQuery的目的
学习如何使用jQuery操作DOM，其实就是学习jQuery封装好的API。（什么是API呢?）
这些API的共同特点是：几乎全都是方法。所以，在使用jQuery的API时，都是方法调用，也就是说要加小括号()，小括号里面是相应的参数，参数不同，功能不同。
下载jQuery
到官网下载：http://jquery.com/
jQuery的两大特点
1、链式编程：比如.show()和.html()可以连写成.show().html()。
2、隐式迭代：意思是在方法内部进行循环遍历，而不是我们自己在进行遍历，简化操作。
jQuery的使用步骤
1、引包
2、入口函数
3、功能实现代码 (事件处理)
注意：导包的代码一定要放在js代码的最上面。
jQuery的入口函数和$符号
入口函数
原生js的入口函数指的是：window.onload = function(){ };
window.onload = function(){
//window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
//如果不写window.onload() 代码的执行顺序 从上到下
var oDiv = document.getElementById('box');
console.log(oDiv);
jQuery的入口函数有以下几种写法：
//1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(document).ready(function () {
alert(1);
})
//2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
$(function () {
alert(1);
});
//3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
$(window).ready(function () {
alert(1);
})
jQuery的入口函数与js的入口函数的区别
区别一：书写个数不同：
Js 的入口函数 window.onload 不能同时编写多个，如果有多个window.onload方法，只会执行一个，覆盖。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。
区别二：执行时机不同：
Js的入口函数 window.onload 是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数 $(document).ready() ，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
文档加载的顺序：从上往下，边解析边执行。
jQuery的$符号
jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了两个变量：$ 和 jQuery。
<script src="jquery-3.3.1.js"></script>
<script> console.log($);
console.log(jQuery);
console.log($===jQuery); </script>
打印结果：
$实际上表示一个函数名：
$(); // 调用上面我们自定义的函数$
$(document）.ready(function(){}); // 调用入口函数
$(function(){}); // 调用入口函数
$(“#btnShow”) // 获取id属性为btnShow的元素
$(“div”) // 获取所有的div标签元素
如上方所示，jQuery 里面的 $ 函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象。
jQuery这个js库，除了$ 之外，还提供了另外一个函数：jQuery。jQuery函数跟 $ 函数的关系：jQuery === $。
js中的DOM对象和jQuery对象的比较
二者的区别
通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：
针对下面这样一个div结构：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>
通过原生 js 获取这些元素节点的方式是：
var myBox = document.getElementById("app"); //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组
var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组
通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）
//获取的是数组，里面包含着原生 JS 中的DOM对象。
console.log($('#app'));
console.log($('.box'));
console.log($('div'));
设置当前div的样式：
$('div').css({
'width': '200px',
'height': '200px',
"background-color":'red',
'margin-top':'20px'
})
由于JQuery 自带了 css()方法，我们还可以直接在代码中给 div 设置 css 属性。
总结：jQuery 就是把 DOM 对象重新包装了一下，让其具有了 jQuery 方法。
二者的相互转换
1、DOM对象转换为jQuery对象：
$(js对象);
2、jQuery对象转换为DOM对象：
jquery对象[index]; //方式1（推荐） jquery对象.get(index); //方式2
jQuery对象转换成了 DOM 对象之后，可以直接调用 DOM 提供的一些功能。如：
$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';
总结：如果想要用哪种方式设置属性或方法，必须转换成该类型。
jQuery的选择器
基础选择器
1、id选择器
2、标签选择器
3、类选择器
4、通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">学校1</li>
<li><a href="https://www.luffycity.com">学校2</a></li>
<li class="li3">学校3</li>
<li>学校4</li>
<li>学校5</li> </ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //基础选择器
//1.id选择器
console.log($('#brother')); $('#brother').css('color','red'); //2.标签选择器
//设置一个值
// $('a').css('color','yellow')
// 设置多个值 设置多个值得时候使用对象存储 key:value
$('a').css({'color':'yellow','font-size':'24px'}); //3.类选择器 $('.li3').css('background','green'); //4.通配符选择器 * 使用不是很频繁 console.log($('*'));
//清空整个界面的dom元素
$('*').html('');
}) </script>
</html>
示例
层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*#brother{
color: red;
font-size:24px;
}*/
</style>
</head>
<body>
<ul>
<li id="brother">1</li>
<li><a href="https://www.luffycity.com">2</a></li>
<li class="li3">3</li>
<li>4</li>
<li>5</li>
</ul> <div id="box">
<p id="father">天王盖地虎</p>
<p>我是你老母</p>
<p>宝塔镇河妖</p>
<p>蘑菇放香蕉</p>
<div id="box2">
<p>小鸡炖蘑菇</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript"> //使用jquery的时候 要有入口函数 回调函数
$(document).ready(function(){ //1.后代选择器 div p $('#box p').css('color','red'); //2.子代选择器 div > p $('#box>p').css('color','yellow'); //3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px'); //4.兄弟选择器 ~
$('#father~p').css('background','blueviolet'); console.log($('li')); //5.获取第一个元素
$('li:first').css('font-size','50px'); //6.获取最后一个元素
$('li:last').css('font-size','50px'); $('li:eq(3)').css('font-size','50px');
}) </script>
</html>
示例
基本过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
</head>
<body>
<ul>
<li>哈哈哈哈，基本过滤选择器</li>
<li>嘿嘿嘿</li>
<li>天王盖地虎</li>
<li>小鸡炖蘑菇</li> </ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"> $(function(){
//获取第一个 :first ,获取最后一个 :last //奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','yellow'); //选中索引值为1的元素 *
$('li:eq(1)').css('font-size','100px'); //大于索引值1
$('li:gt(1)').css('font-size','50px'); //小于索引值1
$('li:lt(1)').css('font-size','12px');
})
</script>
</html>
示例
属性选择器
//标签名[属性名] 查找所有含有id属性的该标签名的元素
$("li[id]").css('color','red') //[attr=value] 匹配给定的属性是某个特定值的元素
$('li[class=what]').css('font-size','30px') //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('color','darkgreen') //匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','red') //匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','yellow') //匹配给定的属性是以包含某些值的元素
$("button[class*='btn']").css('background','#0000FF')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<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 action="" method="post"> <input name="username" type='text' value="1" checked="checked">
<input name="username1111" type='text' value="1">
<input name="username2222" type='text' value="1">
<input name="username3333" type='text' value="1">
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button>
</form>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"> $(function(){
// 标签名[属性名] 查找所有含有id属性的该标签名的元素
$('li[id]').css('color','red'); //匹配给定的属性是what值得元素
$('li[class=what]').css('font-size','30px');
//[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
$('li[class!=what]').css('font-size','50px'); // 匹配给定的属性是以某些值开始的元素
$('input[name^=username]').css('background','gray');
//匹配给定的属性是以某些值结尾的元素
$('input[name$=222]').css('background','greenyellow'); //匹配给定的属性是以包含某些值的元素
$('button[class*=btn]').css('background','red')
}) </script>
</html>
示例
筛选选择器
//获取第n个元素 数值从0开始
$('span').eq(0).css('font-size','30px') //first()获取第一个元素
$('span').first().css('background','red') //last()获取最后一个元素 //.parent() 选择父亲元素
$('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'}) //.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red') //.find()
//查找所有的后代元素
$('div').find('button').css('background','#313131')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript"> //获取第n个元素 数值从0开始
$('span').eq(1).css('color','#FF0000'); //获取第一个元素 :first :last 点语法 ：get方法 和set方法
console.log($('span').last());
$('span').last().css('color','greenyellow'); console.log($('span').parent('.p1'));
$('span').parent('.p1').css({"width":'300px',height:'400px',"background":'red'}); //.siblings()选择所有的兄弟元素
$('.list').siblings('li').css('color','red'); //.find()
//查找所有的后代元素
$('div').find('button').css('background','yellow')
</script>
</html>
示例
Python全栈开发之路 【第十五篇】：jQuery的介绍和选择器的更多相关文章
- Python全栈开发之路 【第五篇】：Python基础之函数进阶(装饰器、生成器&迭代器)
本节内容 一.名称空间 又名name space,就是存放名字的地方.举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的地方. 名称空间共3种,分别如下 ...
- Python全栈开发之路 【第七篇】：面向对象编程设计与开发（1）
本节内容 一.编程范式 编程指的是写程序.敲代码,就是指程序员用特定的语法.数据结构和算法编写的代码,目的是来告诉计算机如何执行任务的. 在编程的世界里最常见的两大流派是:面向过程与面向对象.“功夫的 ...
- Python全栈开发之路 【第四篇】：Python基础之函数
本节内容 函数def: 1.位置参数,默认参数 2.位置参数,关键参数 3.如果参数中出现 *users,传递的参数就可以不再是固定的个数, 传过来的所有元素进行打包成元组 *args,**kwarg ...
- Python全栈开发之路 【第六篇】：Python基础之常用模块
本节内容 模块分类: 好处: 标准库: help("modules") 查看所有python自带模块列表 第三方开源模块: 自定义模块: 模块调用: import module f ...
- Python全栈开发之路 【第八篇】：面向对象编程设计与开发（2）
一.继承与派生 什么是继承? 继承指的是类与类之间的关系,是一种什么是什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创建新的类的方式,在python中,新建的类可以继承一个或多个父类 ...
- Python全栈开发之路 【第三篇】：Python基础之字符编码和文件操作
本节内容 一.三元运算 三元运算又称三目运算,是对简单的条件语句的简写,如: 简单条件语句: if 条件成立: val = 1 else: val = 2 改成三元运算: val = 1 if 条件成 ...
- Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- python 全栈开发之路 day1
python 全栈开发之路 day1 本节内容 计算机发展介绍 计算机硬件组成 计算机基本原理 计算机 计算机(computer)俗称电脑,是一种用于高速计算的电子计算机器,可以进行数值计算,又可 ...
- Python全栈开发之路 【第一篇】：Python 介绍
本节内容 一.Python介绍 python的创始人为荷兰人——吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本 ...
- Python全栈开发之路 【第十九篇】：Bootstrap
一.下载和基本使用 官方地址:www.bootcss.com 二.响应式介绍 1.@meida 媒体查询 (1)响应式页面 为了页面能够适应不同工具的屏幕大小的限制,而开发的一种自适应页面,即 一次开 ...
随机推荐
- HDFS客户端的权限错误：Permission denied
报错:Permission denied: user=root, access=WRITE, inode="hadoop":hadoop:supergroup:rwxr-xr-x ...
- Spring基于注解注入的两种方式
1.@Autowried 1)默认基于类型查找容器的的Bean进行注入(注入的Bean的实现类是唯一的). 2)当实现类的Bean大于一个的时候,需结合@Qualifier,根据Bean的名称来指定需 ...
- asp.net Web项目中使用Log4Net进行错误日志记录
使用log4net可以很方便地为应用添加日志功能.应用Log4net,开发者可以很精确地控制日志信息的输出,减少了多余信息,提高了日志记录性能.同时,通过外部配置文件,用户可以不用重新编译程序就能 ...
- cp 拷贝
cp -a = cp -pdr p (preserve 保持) 复制时保持文件原有的属性(preserve) 模式 所有权 时间戳 d 连接文件 no dereference 复制时拷备连接文件的属 ...
- Unity 琐碎(4) 可视化辅助调试Giamos
Gizmos 类 可以在代码中绘制一些输出结果或者中间输出内容,比如计算后的包围盒等等 类变量 方法 作用 color 控制输出颜色 matrix Set the gizmo matrix used ...
- 使用Java命令行方式导入第三方jar包来运行Java程序的命令
1.首先使用命令行进入到a.java所在的文件夹:(比如我的在D:\javaeeworkspace\SharedPS_WS\src\com\dyf\main 这样一个路径下,) d: 回车, cd D ...
- 2.03-handler_openner
import urllib.request def handler_openner(): #系统的urlopen并没有添加代理的功能所以需要我们自定义这个功能 #安全 套接层 ssl第三方的CA数字证 ...
- CSS--块级元素和行内元素
相同:设置后,对应的模块都会脱离文档流 不同点:position相应的块级元素会覆盖下面的内容(文字,),而float只会覆盖块级元素,里面的文字会脱离 出来 float是浮动定位,position是 ...
- Google Colab 基本操作
## 上传 from google.colab import files uploaded = files.upload() for fn in uploaded.keys(): print('Use ...
- 关于xampp中无法启动mysql,Attempting to start MySQL service...的解决办法！！
最近在学习服务器方面的知识,找到了这款功能强大的建站集成软件包——xampp.但是在开数据库服务器的时候,出现了这种情况.一直在Attemptng to start MySQL service... ...