JQuery操作

简介

1.使用jQuery的好处
    1.加载速度更快
    2.选择器更多也更好用
    3.支持Ajax
    4.兼容更多浏览器
    5.代码量大大减少
2.如何加载jQuery
    1.下载jQuery核心文件到本地引入
    2.CDN网络资源加载(依赖网络)
        网络资源  https://www.bootcdn.cn/
            https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
            https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
3.jQuery的使用
    jQuery导入之后需要使用关键字才能使用
        默认的关键字就是jQuery，简化的关键字是 $

jQuery对象与标签对象

两者间的互相转换
    标签对象转jQuery对象
        $(标签对象)
    jQuery对象转标签对象
        jQuery对象[0]

jQuery查找标签

1.基本选择器
    $('#d1')    id选择器
    $('.c1')    class选择器
    $('div')    标签选择器
2.组合选择器
    $('div#d1')        查找id是d1的div标签
    $('span.c1')       查找含有c1样式类的span标签
3.层级选择器
    $('div p')        查找div里面所有的为后代标签的p标签
    $('div>p')        查找div里面的所有为儿子标签的p标签
    $('div+p')        查找div同级别下面的紧挨着的p标签
    $('div~p')        查找div同级别下面所有的p标签
4.属性选择器
    $('[username]')        查找含有username属性名的标签
    $('[username="jason"]')  查找含有username属性名并且属性值为jason的标签
5.基本筛选器
    :first  第一个
    :last   最后一个
    :eq(index)  索引等于index的那个元素
    :even       匹配所有索引值为偶数的元素，从0开始计数
    :odd        匹配所有索引值为奇数的元素，从0开始计数
    :gt(index)  匹配所有大于给定索引值index的元素
    :lt(index)  匹配所有小于给定索引值index的元素
    :not(元素选择器)  移除所有满足not条件的标签
    :has(元素选择器)  选取所有包含一个或多个标签在内的标签(从其后代元素中筛选)
6.表单筛选器
    $(':表单标签属性')
    注意 使用表单筛选器查找checked时，checked与selected都会找到
7.筛选器方法
    $("#id").next()  查找当前元素的下一个元素
    $("id").prev()   查找当前元素的上一个元素
    $("#id").parent()  查找当前元素的父亲元素
    $("#id").parents()  查找当前元素的所有父辈元素
    $("#id").parentsUntil("#d1")  查找当前元素的所有父辈元素，直到遇到id为d1的元素为止
    $("#id").children()  查找当前元素的所有儿子元素
    $("#id").siblings()  查找当前元素的所有兄弟元素

jQuery操作标签

1.class操作
    addClass()      ==> ClassList.add()  添加类的操作
    removeClass()   ==> ClassList.remove()  删除类
    hasClass()      ==> ClassList.contains()  查询类
    toggleClass()   ==> ClassList.toggle()  类存在则删除否则添加
2.位置操作
    $(window).scrollTop()  获取匹配元素相对滚动条顶部的偏移(滚动条位置)
3.文本操作
    html()          取得第一个匹配元素的html内容  ==> innerHTML
    html(val)       设置所有匹配元素的html内容    ==》innerText
    text()          取得所有匹配元素的内容
    text(val)       设置所有匹配元素的内容
    val()           取得第一个匹配元素的当前值    ==> value
    val(val)        设置所有匹配元素的值
4.创建标签
    $('<a>')   ==> document.createElement('a')
5.属性操作
    attr()/removeAttr()  获取/移除属性
    prop()/removeProp()  获取/移除属性
    # attr针对动态变化的属性会失真，因此建议以后尽量都使用prop
6.文档处理
    $(A).append(B)              把B追加到A
    $(A).appendTo(B)            把A追加到B
    $(A).prepend(B)             把B前置到A
    $(A).prependTo(B)           把A前置到B
    
    $(A).after(B)               把B放到A的后面
    $(A).insertAfter(B)         把A放到B的后面
    $(A).before(B)              把B放到A的前面
    $(A).insertBefore(B)        把A放到B的前面
    
    remove()    从DOM中删除所有匹配的元素
    empty()     删除匹配的元素集合中所有的子节点

jQuery事件

JS绑定事件
    标签对象.on事件名 = function(){}
jQuery事件绑定
    方式一
        jQuery对象.事件名(function(){})
    方式二
        jQuery对象.on('事件名称',function(){})
    # 正常情况下我们用的是方式一，方式二只是备胎
    
    clone属性
        clone()   克隆，默认只克隆内容，不克隆事件(括号内加一个true就可以)

事件相关补充

1.取消后续事件
    事件函数的最后return false即可
2.阻止事件冒泡
    事件函数的最后return false即可
    事件冒泡：
        事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件
# 也就是说事件函数的最后return false有两重功能
3.等待页面加载完毕再执行代码
    $(document).ready(function(){})    完整写法
    $(function(){})    缩略写法
4.事件委托
    针对动态创建的标签也可以使用绑定的事件
    $('body').on('click','button',function(){})
    将body内所有的单击事件委托给button标签执行

jQuery动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

Bootstrap框架

简介

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

版本有很多 使用V3即可

文件结构
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依赖于jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自动提示问题
	最好本地导入几次

核心部分讲解

使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

重要样式

1.表格样式
	<table class="table table-hover table-striped">
	颜色
 	 <tr class="success">
2.表单标签
	class = "form-control"
3.按钮组
	class = "btn btn-primary btn-block"

组件

1.图标
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.导航条
	class="navbar navbar-inverse"
3.其他