Python基础day51
jQuery快速入门
我们最好称之为是jQuery库更好一些，不要称之为是框架
库就类似于是Python中的模块，简称为jq
jQuery就是js、css等的封装版本，只要一封装，写法肯定会简单
jQuery介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
他就是一个封装好的js文件，几十KB大小
前端的最大问题就是兼容性问题，需要兼容各个浏览器，这句话的意思就是以后你使用jQuery，就不用关心兼容性问题了，他们内部已经做好了
1.兼容性问题
2. 响应式问题
它的宗旨就是：“Write less, do more.“
jQuery的优势
1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变
色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
jQuery内容
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档操作
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax
jQuery如何使用
官方网站：https://jquery.com/
中文文档：https://jquery.cuishifeng.cn/
jQuery版本
● 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
● 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
● 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
我们主要学习jQuery3.x的版本
下载地址
要想使用jQuery，必须在文档中首先引入jQuery库文件
https://www.bootcdn.cn/------>下载jquery、bootstrap、vue等文件
使用方式
1. 直接引入外链的js库
2. 把jQuery文件直接下载到本地，通过本地引入，推荐该方式
什么是CDN：加快我们的加载文件的速度
jQuery对象
1. jQuery对象：就是通过jQuery包装DOM对象后产生的对象
如果你是jQuery对象，那么就可以使用jQuery提供的很多方法
2. 标签对象：直接就是通过各种选择器得到的标签
标签对象不能够直接使用jQuery库提供的很多方法
$("#i1").html(); # 拿到id为i1的文本内容
$的含义
jQuery("#i1").html();
$("#i1").html();
// 以上两行代码的意思是一样的
jQuery === $
// 以后的代码里都使用$符号代替jQuery
jQuery基础语法
jQuery("selector").action();
$("selector").action();
// jQuery的学习步骤
1. 先学会如何查找标签
2. 找到标签之后再做相对于的操作
基本选择器
// id、ciass、标签选择器 var div1 = $('#d1'); //获取id为d1 的jQuery对象 console.log(div1) // jQuery对象和标签对象的相互转换 var div2 = document.getElementById('d1'); //拿到一个标签对象 console.log(div2) var div3 = $(document.getElementById('d1')); //使用jQuery把DOM包起来来使用jQuery方法 console.log(div3) var div4 = document.getElementsByClassName('c1')[0] console.log(div4) var div5 = $('.c1')[0] console.log(div5) // 获取所有的div标签内容 var div6 = $('div') console.log(div6) // 配合使用的 var div7 = $('div.c1') // 找到有c1 class类的div标签，作为对象显示 console.log(div7) var div8 = $('div#d1') // 找到id为d1的div标签，作为对象显示 console.log(div8) //通用选择器 $('*')
组合选择器
<script>
var p = $('#d1,.c1,p'); // 并列+混用 查找id为d1，类为c1的和p，组合成对象，索引取值
console.log(p)
var s = $('div span'); // 后代 查找div下的span
console.log(s)
var c = $('div>span'); // 儿子 查找div下的第一个span
console.log(c)
var b = $('div+span'); // 毗邻 查找div相邻的span
console.log(b)
var d = $('div~span'); // 弟弟 div平级的所有span
console.log(d)
</script>
基本筛选器
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="c1">5</li>
</ul>
<div>
<span class="c2">span</span>
</div>
<div>
<span class="c3"></span>
</div>
<script>
$('ul li:first').css('color','red'); // 匹配第一个元素
$('ul li:last').css('color','red'); // 匹配最后一个元素
$('ul li:eq(2)').css('color','red'); // 匹配指定索引元素
$('ul li:even').css('color','blue') //匹配所有索引为偶数的元素，从0开始计数
$('ul li:odd').css('color','red') //匹配所有索引为奇数的元素，从0开始计数
$('ul li:gt(3)').css('color','pink') // 匹配所有大于给定索引值的元素
$('ul li:lt(3)').css('color','yellow') // 匹配所有小于给定索引值的元素
$('ul li:not(.c1)').css('color','red') // 除了满足not条件的其他元素
$('div:has(.c2)').css('color','red') // 匹配所有后代中有c2类的div
</script>
</body>
属性选择器
// [attribute] // [attribute=value]// 属性等于 // [attribute!=value]// 属性不等于 <body> <input type="text"> <input type="password"> <input type="checkbox"> <script> var c = $("input[type='checkbox']");//匹配checkbox类型的input标签 console.log(c) var t = $("input[type !='text']");//匹配类型不是text类型的标签 console.log(t) </script> </body>
表单筛选器
// :text // :password // :file // :radio // :checkbox // :submit // :reset // :button <body> <input type="text"> <input type="password"> <input type="file"> <input type="radio" name="gender">男 <input type="radio" name="gender" checked>女 <input type="checkbox"> <input type="submit"> <input type="reset"> <input type="button"> <select name="" id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="guangzhou">广州</option> </select> <script> var t = $(":text");//匹配所有text类型的input console.log(t) var p = $(':password');//匹配所有password类型的input console.log(p) var s = $(':selected'); console.log(s) console.log($(':checked'));//它会将checked和selected都拿到 console.log($('input:checked'))//限制只找input下面的 </script> </body>
筛选器方法
<body> <div id="d1">div1 <p>p2</p> </div> <div id="d2">div2 <p id="p1">p1 <span class="c1">span2 <a href=""></a> </span> </p> </div> <span id="s1">span1</span> <script> //下一个元素 console.log($('#d1').next());//匹配id为d1的下一个同级标签 console.log($('#d1').nextAll());//匹配id为d1后面的所有同级标签 console.log($('#d1').nextUntil('#s1'));//匹配id为d1后面的同级标签，到id为s1为止，不包含s1. //上一个元素 console.log($('#s1').prev());//匹配id为s1的上一个同级标签 console.log($('#s1').prevAll());//匹配id为s1上面的所有同级标签 console.log($('#s1').prevUntil('#d1'));//匹配id为s1前面的同级标签，到id为d1为止，不包含d1. //父亲元素 console.log($('.c1').parent());//匹配class类为c1的父类元素 console.log($('.c1').parents());//匹配class类为c1的所有父类元素 console.log($('.c1').parentsUntil('#d2'));//匹配class类为c1的所有父类元素直到id为d2的元素为止，不包含d2 //儿子和兄弟元素 console.log($('#d2').children());//儿子们 console.log($('#d2').siblings());//兄弟们 //查找 console.log($('div').find('p'));//匹配div下的p标签 console.log($('div p').find('span'));//匹配div下的p标签下的span标签 console.log($('div .c1').find('a'));//匹配div下的c1类下的a标签 </script> //补充 ：first() // 获取匹配的第一个元素 $('div span:first')-------------->$('div span').first() ：last() // 获取匹配的最后一个元素 $('div span:last')----------------->$('div span').last() ：not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('div span:not("#d3")') --------------->$('div span').not('#d3') ：has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 ：eq() // 索引值等于指定值的元素 $("ul li:eq(2)")--------------------------->$("ul li").eq(2); $("div span:eq(2)")--------------------------->$("div span").eq(2);
操作标签
<body>
<div class="c1">欢迎来到py联盟</div>
<script>
//样式操作
console.log($('#d1').addClass('c2'))//添加指定css类名
console.log($('#d1').removeClass('c2'))//移除指定css类名
console.log($('#d1').hasClass('color','red'))//判断样式存不存在
console.log($('#d1').toggleClass('c2'))//切换类名，有就移除，没有就添加
//文本操作
console.log($('.c1').html())//取得第一个匹配元素的文本内容
console.log($('.c1').html('我不来'))//设置所有匹配元素的文本内容
console.log($('.c1').text())//取得第一个匹配元素的文本内容
console.log($('.c1').text('我不来'))//设置所有匹配元素的文本内容
//属性操作
console.log($('.c1').attr('username','jack'))//为所有匹配元素设置一个属性值
console.log($('.c1').attr('username'))//返回第一个匹配元素的属性值
console.log($('.c1').attr({'age':18,'gender':'男'}))//为所有元素设置多个属性值
console.log($('.c1').removeAttr('gender'))//从每个匹配的元素中删除一个属性
</script>
</body>
用于checkbox和radioprop和attr的区别：
记住：
如果你设置或者获取单选框和复选框的属性值的时候，就使用prop()
除此之外，获取属性和设置属性都使用attr()
