jQuery类库

jQuery简介

'''核心功能：兼容多浏览器的JavaScript库'''
1.一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
3.跨浏览器兼容。jQuery基本兼容了现在主流的浏览器
它的宗旨就是：“Write less, do more.“

jQuery基本使用

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版。目前该版本是官方主要更新维护的版本。

jQuery使用的时候需要先导入
有两种导入方式：
 1.本地导入，提前下载文件并导入
 2.网络CDN服务，只要计算机能够联网就可以导入。
 
 ps：主要针对前端的免费CDN服务的一个网页：

HTML模板jQuery导入
'''在bootcdn里面复制jQuery的压缩版链接，在pycharm里面直接导入，下次可以直接使用'''
ps：如果想在本地使用的话，需要下载文件！

js与jQuery语法对比

给p标签添加颜色
<p id="p1">哈哈哈</p>
<p id="p2">嘻嘻嘻</p>

1.用js方法添加颜色：
let p1Ele = document.getElementById('p1');
p1Ele.style.color='red';
2.用jQuery添加颜色：
$('p').first().css('color','greenyellow').next().css('color','red');

# ps:jQuery不仅操作标签属性更快更便捷，而且能一下操作两行标签的属性

jQuery的两种写法：$()/jQuery()

jQuery查找标签

1,基本选择器
$('#id') 查找id选择器/$("TagName")标签选择器/$('.classname')class选择器
$('id.c1') 查找class是c1的标签
2.所有元素选择器
$('*') 查找所有标签
3.组合选择器
$("#id, .className, tagName")
4.层级选择器（x，y可以是任意标签）
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

jQuery查找标签的结果与js的区别

'''二者结果集都是数组，但是功能有所区别'''
1.如果用索引取值，那么获得的都是标签对象。
 标签对象无法调用jQuery方法
2.标签对象如果想要转换成jQuery对象，需要使用$()括起来
  转为jQuery对象是伪类更好的调用jQuery方法

代码验证结果：
document.getElementsByTagName('p');
返回结果：HTMLCollection(2) [p#p1, p#p2, p1: p#p1, p2: p#p2]
document.getElementsByTagName('p')[0];
返回结果：<p id="p1" style="color:greenyellow;">哈哈哈</p>
$('p');
返回结果：S.fn.init(2) [p#p1, p#p2, prevObject: S.fn.init(1)]
$('p')[0];  # 变成了标签对象，此时只能使用js方法操作属性
返回结果：<p id="p1" style="color:greenyellow;">哈哈哈</p>


$(document.getElementsByTagName('p')[0])
返回结果：S.fn.init [p#p1]

ps:从标签对象转换成了jQuery标签对象，可以调用jQuery方法了

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

单表筛选器(属性选择器优化版)

代码：
<p><input type="text" class="a" disabled></p>
<p><input type="password" class="a"></p>
<p><input type="radio" class="b" checked>a</p>
<p><input type="radio" class="b" checked>b</p>
<p><input type="checkbox" class="c" checked>d</p>

<p>
  <select name="" id="d1">
  <option value="1">hhaha</option>
  <option value="2" selected>heiehh</option>
  <option value="3">heheh</option>
  </select>

查找结果：
$('input[type="password"]');
$(':password');
 # 两个结果一致 S.fn.init [input.a, prevObject: S.fn.init(1)]

$(':disabled');  查找disabled属性  (禁用的标签)
$(':checked');
'''查找结果会自动返回selected'''
$('input:checked');
查找结果只有checked

$("selected");
查找结果只会返回selected

筛选器：
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
    
:enabled
:disabled
:checked
:selected

筛选器方法

下一个元素：
$("#id").next()  id的下一个标签
$("#id").nextall() 查询id下的所有标签
$("id").nextUntil('#id') 查询id后面直到括号里的id

上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父类元素：
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

子类元素和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

链式操作的底层原理

对象点方法之后会返回一个对象，就是每次方法执行完后返回this对象，这样后面的方法就可以继续在this环境下执行
'''python中的函数也可以实现链式操作，只需用return 把函数本身返回出去就可以'''

操作标签

样式类操作

jQuery操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
.css('样式名','样式值')
------------
js操作
ClassList.add()
ClassList.remove()
ClassList.contains()
ClassList.toggle()
style.样式名 = '样式值'

文本操作

jQuery操作                                      js操作
text()						innerText()
html()						innerHTML()
val()						value
[0].files                                       files

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio：
prop() // 获取属性
removeProp() // 移除属性

ps：attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性

添加属性

append()    添加到指定元素的后面
prepend()  添加到指定元素的前面
after()   添加到指定元素外部的后面
before() 添加到指定元素外部的前面


remove()	移除标签
empty()		清空标签

jQuery绑定事件

常用事件

click(function(){...})   点击事件
hover(function(){...})   鼠标悬浮事件
blur(function(){...})    鼠标移出input框
focus(function(){...})   鼠标进入input框
change(function(){...})  文本域变化事件
keyup(function(){...})   键盘事件

两种绑定方式

JS绑定事件
  标签对象.on事件名 = function(){事件代码}
  btnEle.onclick = function(){alert(123)}
jQuery绑定事件
方式1
	jQuery对象.事件名(function(){事件代码})
	$btnEle.click(function(){alter(123)})
方式2
	jQuery对象.on('事件名',function(){事件代码})
	$btnEle.on('click',function(){alter(123)})
"""
有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2

代码验证：
<body>
<button id="d1">点我</button>
<script>
    let $butEle = $('#d1')
第一种：
     $butEle.click(function (){
       alert('哈哈哈')
     })
第二种：
    $butEle.on('click',function (){
        alert('你好啊')
    })
</script>
</body>

jQuery事件案例

# clone()克隆事件
  <style>
    .c1{
      border: aqua solid 1px;
      background: aqua;
    }
  </style>
  
</head>
<body>
<button id="d1" class="c1"> 真是美好的一天 </button>
<script>
  let $btnEle = $('#d1');
  $btnEle.click(function (){
    $('body').append($(this).clone(true))
  //  把克隆的事件添加到body窗口
  })
</script>
</body>

阻止后续事件

能够触发form表单提交数据动作的标签有两个，submit和botton。
<input type="submit">
<button></button>

'''给已经有事件的标签绑定事件，会先触发事件再执行原有的事件'''
如果想让之前的事件不再执行，那么使用return false
$(':submit').click(function (e){
            alert('一定要细心 千万不要慌!!!')
            // return false  方式1
            e.preventDefault()方式2
        })

事件冒泡

'''指当标签嵌套的时候，并且有相同事件的时候，会逐层往上反馈并且执行'''

阻止冒泡事件的方式：

$("span").click(function (e) {
        alert("span");
    	  return false;  		方式1
        e.stopPropagation(); 	方式2
    });

事件委托

事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('哈哈哈')
        })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

Bootstrap

提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入  bootstrap涉及到js的部分需要使用jQuery 
'''响应式布局就是根据屏幕的大小动态改变展示页面的大小'''
布局容器
栅格系统
全局css样式
组件
	http://www.fontawesome.com.cn/
	
	
CDN导入：<script src=https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js>
本地下载的导入以后不需要联网也可以使用

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列