IE浏览器：前端针对IE有时候需要单独写一份代码
jQuery的宗旨是：Write less, do more 写的更少做的更多
加载速度快
选择器更对更好用
链式表达式：jQuery的链式操作可以把多个操作卸载一行
一行代码走天下
支持ajax请求(重点)
兼容多浏览器
插件扩展开发，拥有非常丰富的第三方的插件
下载核心文件到本地引入（没有网络也可以使用）
<script src="jQuery3.6.js"></script>
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源代码压缩过的
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
什么是CDN：
内容分发网络
学习网址：https://jquery.cuishifeng.cn/
jQuery导入之后需要使用关键字才可以使用
默认的关键字就是jQuery但是不好输入就用>>>:$来代替了
jQuery封装了js代码 让编写更简单 但是有时候JS代码更快
js代码与jQuery代码的对比
js原生代码
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
jQuery封装的
$('p').first().css('color','yellow').next().css('color','blue')
不同的对象能够调用的方法是不同的
在编写代码的时候一定要看清楚手上是什么对象
两者可互相转换
标签转对象：
$(标签对象)
jQuery对象转标签对象：
jQuery对象[0]
核心：对象在调完一个方法后返回的还是一个对象
基本选择器
$('#id') //id选择器
$('.cls') //类选择器
$('div') //标签选择器
组合选择器
$('div#d1') //表示id是d1的div标签
$('p.c1') //表示class是c1的p标签
$('div,p,span') //查找标签是div或p或span的标签
$('#d1,.c1,span')//查找id是di或class是c1或span标签
层级选择器
$('div p') //查找div里面所有的后代p标签
$('div>p') //查找div里面所有的儿子标签
$('div+p') //查找同级别下紧挨着的p标签
$('div~p') //查找同级别下所有兄弟p标签
属性选择器
$('[username]') //查找含有username属性的标签
$('[username="ikun"]')//查找含有username属性名并且等于jason的标签
$('input[username="ikun"]')//查找含有username属性名并且等于jason的input标签
基本选择器
$('ul li:first') //第一个
$('ul li:last') //最后一个
$('ul li:eq(index)') //索引等于index的哪个元素索引从0开始
$('ul li:even')//匹配所有所有值为偶数的元素 从0开始计数
$('ul li:odd')//匹配所有索引值为奇数的元素
$('ul li:gt(index)') //匹配所有大于给定索引值的元素
$('ul li:lt(index)')//匹配所有小于给定索引值的元素
$('ul li:not(元素选择器)')//移除所有满足not条件的标签
$('ul li:has(元素选择器)')//选取所有包含一个或多个标签在其的标签（值的是从后代元素找）
$('ul li:first') 优化 $('li').first()
表单筛选器
$(':text') //找到所有type属性为text的input标签
$(':password')//找到所有type属性为password的input标签
$(':radio')//找到所有type属性为radio的input标签
$(':file')//找到所有type属性为file的input标签
$(':checkbox')//找到所有type属性为checkbox的input标签
$(':button')//找到所有type属性为button的input标签
$(':submit')//找到所有type属性为submit的input标签
$(':reset')//找到所有type属性为reset的input标签
表单对象属性
$(':enabled')//找到所有含有enabled属性的input标签
$(':disabled')//找到所有含有disabled属性的input标签
$(':checked')//找到所有含有checked属性的input标签
$(':selected')//找到所有含有selected属性的input标签
筛选器方法
//同级别往下找
$('#id').next() //找到同级别下一个标签
$('.cls').nextAll()//找到下面所有同级别标签
$('cls').nextUntil('#cls2')//同级别向下找直到cls2标签类
//同级别往上找
$('#id').prev()//找到同级别上一个标签
$('.cls').prevAll()//找到上面所有同级别标签
$('.cls').prevUntil('#cl')//同级别向上找直到c1标签
//查找父标签
$('.cl10').parent();//找到上一个父标签
$('.cl10').parents();//找到上面所有父标签
$('#id10').parentsUntil();//向上找直到c1父标签
//查找儿子和兄弟
$('#id').children();//所有儿子标签
$('.cls').siblings();//同级别上下所有标签
//链式操作
$('.cls').parent().parent().parent()
$('#id').parent().parent().next().parent()
jQuery代码查找标签绑定的变量名推荐使用开头例如：开头例如：开头例如：div1Ele
增加类名
$('.cls').addClass('类名') //增加元素类名 相当于原生js中的 原生元素对象.add()
移除类名
$('.cls').removeClass('类名')//移除指定类名 相当于原生js中的 原生元素对象.remove()
查看有没有这个类名
$('.cls').hasClass('c2') //判断有没有指定的类名 相当于原生js中的 原生元素对象.contains()
有移除无添加类名
$('.cls').toggleClass('c1') //有则移除，无添加 相当于原生js的 原生元素对象.toggle('c1')
位置操作
$(window).scrollTop() //用户获取右侧滚动条距离顶端位置
//实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 500){
alert('超过本页500了')
}
})
文本操作 .text().trim()小坑
jQuery DOM
//'括号内填写就是设置不写就是获取'
//获取或设置文本
$('.cls').text() innerText 获取到的文本有可能浏览器会加空格
$('.cls').text().trim() # 所以在进行比对的时候要进行删除空格的操作
//获取或设置元素
$('.cls').html('这里要写这样的<a>') innerHtml
//获取或设置数值
$('.cls').val() value
属性操作
// 获取第一个标签为style属性值
$('div').attr('style')
// 批量设置单个
$('div').attr('name','123')
//批量设置多个
$('div').attr({"name":"ikun",'pwd':"123"})
//批量移除
$('div').removeAttr('name')
获取标签属性的时候， 针对动态属性尤其是复选框不建议使用attr()
$(':radio').prop('checked') // 结果为布尔值不能跟链式表达式
$(':radio').prop('checked',false) // 动态设置
$('option').first().prop('selected',true)
$('option:eq(2)').prop('selected',true)
文档处理
内部添加
$('.div1').append('<a>') 把a到.div1最后里面
$('.div1').prepend('<a>') 把a放到.div最前面
$('.div1').appendTo('.div2') 把.div1添加到.div2最后面
$(',div1').prependTo 把.div2添加到.div1最前面里面
外部添加
$('.div1').after(选择器)
$('.div1').before(选择器)
清空内容
$('body').empty() // 直接清空 body里面的所有东西
js绑定操作
标签对象.onclick = function(){}
标签对象.onchange = function(){}
jQuery绑定操作
方式1:
jQuery对象.click(function(){})
jQuery对象.change(function(){})
方式2:
jQuery对象.on('事件名称',function(){})
ps:默认就用方式1 不行了再用方式2
//括号里面什么都不写.就模拟操作例如click就是模拟点击一下操作
jQuery对象.click(function(){})
jQuery对象.change(function(){})
克隆操作
<button id="d1">小朋友快来玩呀</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件(克隆的不是实体， 只有一个实体)
$('body').append($(this).clone(true)) // 克隆事件(克隆的都是实体)
})
</script>
悬浮事件
//# 鼠标悬浮在上面和移开时触发各一次
$('#d1').hover(function () {alert('芜湖芜湖')})
//# 想要将悬浮和移开分开执行不同的操作，就要写两个函数
$('#d1').hover(
function () {alert('今天要来点新鲜的吗');
$(this).stop(true,true);
},
function () {alert('这么快就走啦')
$(this).stop(true,true);
}
)
https://blog.csdn.net/wkj001/article/details/100578923
输入事件
//input只能使用on方法来绑定事件
$(':text').on('input',function(){
alert($(this).val())
})
值监听事件
"""
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click', function(){})
"""
//# 实操
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
事件相关补充
取消后续事件
事件函数的最后returen false即可
"""
如果给已经有事件的标签绑定事件， 那么会依次执行
如果想要取消后续时间的执行有两种方式
"""
方式一:
$('#di').click(function(){
alert()
return false
})
方式二:
$('#d1').click(function (e) {
alert('bibibi')
e.preventDefault()
})
# 推荐使用第一个
阻止事件冒泡
事件函数的最后return false即可
"""
在多个标签嵌套的并且都有相同事件的情况下， 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
// 代码实现
<div id="d3"> 这是div标签
<p id="d2"> 这是p标签
<span id="d1"> 这是span标签</span>
</p>
</div>
<script>
$('#d1').click(function (){
alert('span')
return false
})
$('#d2').click(function (e){
alert('p')
e.stopPropagation()
})
$('#d3').click(function (){
alert('div')
return false
})
等待页面加载完毕再执行代码
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
事件委托
主要针对动态创建的标签也可以使用绑定的事件
// 书写格式
$('body').on('事件类型','选择器',function(){})
// 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
$('body').on('click','button',function(){})
将body内所有的单击指定标签或元素事件委托给后面的函数执行
// 基本
$('.div1').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 框架
内部提供了很多漂亮的标签样式和功能，我们只需要CV即可
# bootstrap版本
推荐使用V3
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
在使用Bootstrap框架时一定要先把jQuery的js文件导入，否则可能会出现框架js代码不生效问题！！！！！
在使用Bootstrap框架时一定要先把jQuery的js文件导入，否则可能会出现框架js代码不生效问题！！！！！
在使用Bootstrap框架时一定要先把jQuery的js文件导入，否则可能会出现框架js代码不生效问题！！！！！
重要的事情说三边！！！！！
<!-- jQuery 核心 js 文件 在使用Bootstrap框架时一定要先把jQuery的js文件导入，否则可能会出现框架js代码不生效问题-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.4.1/css/bootstrap.css">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
pycharm自动提示问题
最好本地导入几次
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = 'container' //两边有留白
class = 'container-fiuid' //没有留白
格栅系统
class = "row" 一行均分12份
class = "col-md-8" 划分一行的12份
//# 栅格参数可以做到响应式布局xs sm md lg...
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
如果一行十二份用不完 可以调整位置
col-md-offset-3
表格样式
class="table table-hover table-striped table-bordered"
//# 单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
<tr class="success">
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加
按钮与图片
class = "btn btn-primary btn-block"
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
//# 按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>
组件
图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
导航条
class="navbar navbar-inverse"一个正常一个颜色反转
# 更多图标
http://www.fontawesome.com.cn/
联系客服
