前端之jQuery与Bootstrap

jQuery

IE浏览器：前端针对IE有时候需要单独写一份代码

jQuery的宗旨是：Write less, do more 写的更少做的更多

  1. 加载速度快
  2. 选择器更对更好用
  3. 链式表达式：jQuery的链式操作可以把多个操作卸载一行
  4. 一行代码走天下
  5. 支持ajax请求(重点)
  6. 兼容多浏览器
  7. 插件扩展开发，拥有非常丰富的第三方的插件

准备工作

  1. 下载核心文件到本地引入（没有网络也可以使用）

    <script src="jQuery3.6.js"></script>

  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源代码压缩过的

    <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对象

  1. 不同的对象能够调用的方法是不同的
    在编写代码的时候一定要看清楚手上是什么对象
  2. 两者可互相转换
    标签转对象：
    $(标签对象)
    jQuery对象转标签对象：
    jQuery对象[0]

jQuery查找标签

一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签

核心：对象在调完一个方法后返回的还是一个对象

  1. 基本选择器

    $('#id')		//id选择器
$('.cls')		//类选择器
$('div')		//标签选择器

  2. 组合选择器

    $('div#d1')		//表示id是d1的div标签
$('p.c1')		//表示class是c1的p标签

$('div,p,span')	//查找标签是div或p或span的标签
$('#d1,.c1,span')//查找id是di或class是c1或span标签

  3. 层级选择器

    $('div p')		//查找div里面所有的后代p标签
$('div>p')		//查找div里面所有的儿子标签
$('div+p')		//查找同级别下紧挨着的p标签
$('div~p')		//查找同级别下所有兄弟p标签

  4. 属性选择器

    $('[username]')	//查找含有username属性的标签
$('[username="ikun"]')//查找含有username属性名并且等于jason的标签
$('input[username="ikun"]')//查找含有username属性名并且等于jason的input标签

  5. 基本选择器

    $('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()

  6. 表单筛选器

    $(':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标签

  7. 筛选器方法

    //同级别往下找
$('#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

  1. 增加类名
$('.cls').addClass('类名') //增加元素类名 相当于原生js中的   原生元素对象.add()
  1. 移除类名
$('.cls').removeClass('类名')//移除指定类名 相当于原生js中的 原生元素对象.remove()
  1. 查看有没有这个类名
$('.cls').hasClass('c2')  //判断有没有指定的类名  相当于原生js中的 原生元素对象.contains()
  1. 有移除无添加类名
$('.cls').toggleClass('c1')  //有则移除，无添加 相当于原生js的 原生元素对象.toggle('c1')
  1. 位置操作
$(window).scrollTop()  //用户获取右侧滚动条距离顶端位置


//实时监测距离
$(window).scroll(function () {
    if($(window).scrollTop() > 500){
        alert('超过本页500了')
    }
})
  1. 文本操作 .text().trim()小坑
jQuery					DOM
//'括号内填写就是设置不写就是获取'
//获取或设置文本
$('.cls').text()        innerText 获取到的文本有可能浏览器会加空格
$('.cls').text().trim()    # 所以在进行比对的时候要进行删除空格的操作
//获取或设置元素
$('.cls').html('这里要写这样的<a>')   innerHtml
//获取或设置数值
$('.cls').val()         value
  1. 属性操作
// 获取第一个标签为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)
  1. 文档处理
内部添加
$('.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里面的所有东西

JQuery事件

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>

事件相关补充

  1. 取消后续事件
    事件函数的最后returen false即可

    """
  如果给已经有事件的标签绑定事件， 那么会依次执行
  如果想要取消后续时间的执行有两种方式
"""
方式一:
    $('#di').click(function(){
        alert()
        return false
    })
方式二:
    $('#d1').click(function (e) {
            alert('bibibi')
            e.preventDefault()
    })
# 推荐使用第一个

  2. 阻止事件冒泡
    事件函数的最后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
    })

  3. 等待页面加载完毕再执行代码

    $(function(){})				   缩略写法
$(document).ready(function(){})  完整写法

  4. 事件委托
    主要针对动态创建的标签也可以使用绑定的事件

    // 书写格式
$('body').on('事件类型','选择器',function(){})

// 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})

    $('body').on('click','button',function(){})

    将body内所有的单击指定标签或元素事件委托给后面的函数执行

jQuery动画效果

// 基本
$('.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页面框架

# 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>

组件

  1. 图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
  1. 导航条
class="navbar navbar-inverse"一个正常一个颜色反转

# 更多图标
http://www.fontawesome.com.cn/
posted @ 2022-12-06 22:27  clever-cat  阅读(76)  评论(0)  编辑  收藏  举报