JQuery学习笔记

最新推荐文章于 2023-06-15 17:51:23 发布

最爱谭先森

最新推荐文章于 2023-06-15 17:51:23 发布

阅读量307

点赞数 1

文章标签： jquery bootstrap

本文链接：https://blog.csdn.net/qq_45065517/article/details/106833642

版权

项目开发
html5 + css3 + javascript 第一阶段的重构网页页面仔复杂，比较慢，DOM驱动
bootstrap + jQuery + ajax 省略很多DOM操作，比较快捷，DOM驱动
vue + element-ui + axios 非常快，几乎不涉及DOM操作，数据驱动

bootstrap
1、介绍
利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB 站点

2、使用
1) 使用bootCDN(联网)

2) 将bootstrap下载到本地

css文件
bootstrap.min.css
js文件
jquery.min.js
bootstrap.min.js

3、布局
1) 布局容器
.container
类似于固定宽度并支持响应式布局的容器
.container-fluid
类似于100%宽度，占据全部视口的容器(流式布局容器)

2) 媒体响应
页面样式可以根据屏幕的大小自适应的调整

3) 栅格系统
系统会将屏幕或视口自动的划分为最多12列
基本使用：
<div class="row">
<div class="col-md-6">123</div>
<div class="col-md-6">456</div>
</div>

<div class="row">
<div class="col-md-4">一二三</div>
<div class="col-md-4">四五六</div>
<div class="col-md-4">七八九</div>
</div>

简化操作：(会自动分为多个等份的列)
<div class="row">
<div class="col">一二三</div>
<div class="col">四五六</div>
<div class="col">七八九</div>
</div>

嵌套使用：
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">1</div>
<div class="col-md-6">2</div>
</div>
</div>
<div class="col-md-6">456</div>
</div>

4) 图片
1. 外边框 img-thumbnail
2. 圆角 rounded
3. 左右浮动 float-left、float-right
4. 水平居中 mx-auto、d-block
注意：
只有当元素为块级元素或者行内块元素的时候，margin:auto;才生效(也就是水平居中)

如果img标签需要在父元素中水平居中，父元素可以使用text-center，来让img水平居中

5) 表格
1. 以前写表格
table{
border: 1px solid #333;
width: 100%;
}
table td,
table th{
border: 1px solid #333;
text-align: center;
}

2. 现在写表格，直接加类名

3. 常用类名
table-dark
表格主题色
<table class="table table-dark"></table>
thead-light
表格头部的背景色
<thead class="thead-light"></thead>
table-striped
条纹表格
<table class="table table-striped"></table>
table-bordered
边框表格
<table class="table table-bordered"></table>
table-borderless
无边框表格
<table class="table table-borderless"></table>
table-hover
可悬浮表格
<table class="table table-hover"></table>
table-sm
小表格
<table class="table table-sm"></table>
caption
表格标题
<caption>List of users</caption>

4、组件
1) 警告框
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>

注意：
alert框中不仅可以写文本，还可以写html元素(p、span、h1、div)
2) 按钮

3) 表单

4) 模态框

5) 轮播图
时间间隔
data-interval="2000"
悬停时停止轮播
data-pause="hover"
轮播一次
data-wrap="false"

jQuery
1、介绍
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单，因为它提供了一个易于使用的API，可以跨多种浏览器工作。jQuery结合了通用性和可扩展性，改变了数百万人编写JavaScript的方式。

2、使用
1) bootCDN
2) 下载到本地

console.log(jQuery);
console.log($);
console.log(jQuery === $);

后期使用jQuery的时候，都使用简写的$形式

3、在文档加载完毕之后
DOM中
window.onload = function(){

}
jQuery中
方法一：
$(document).ready(function(){

})
方法二：
$(function(){

})

4、选择器
css3的选择器
#id .class div [name] * div>div
jQuery中
1) id选择器 #id
<div id="one">12</div>
<div id="one[bar]">34</div>
<div id="one.bar">56</div>

var firstDiv = $('#one');
console.log(firstDiv);

var secondDiv = $('#one\\[bar\\]');
console.log(secondDiv);

var lastDiv = $('#one\\.bar');
console.log(lastDiv);

注意：
如果id中出现了特殊字符，比如[] . 之类的，需要使用\\进行转义

2) 元素选择器 button
<button>按钮</button>
var btn = $('button');

3) 类选择器 .class
<button class="btn">按钮</button>
var btn = $('.btn');

4) 普遍选择器 *
选中当前html文件中所有的标签
var list = $('*');

5) 子代选择器 div > div
选中给定元素下的所有子元素

6) 后代选择器 div div
选中给定元素下的所有后代元素

// var lis = $('.one li');
var lis = $('.one > li');
console.log(lis);

7) 下一个兄弟选择器 prev + next
匹配紧跟在prev元素之后的next元素

8) 之后所有兄弟选择器 prev ~ siblings
匹配prev元素之后的所有siblings元素

// var divs = $('.one + div');
var divs = $('.one ~ div');
console.log(divs);

9) 伪类选择器
:first
获取第一个元素
:last
获取最后一个元素
:nth-child(n)
获取第n个元素

<div class="one">
<div>12</div>
<div>34</div>
<div>56</div>
<div>78</div>
</div>

var firstDiv = $('.one div:first');
var lastDiv = $('.one div:last');
var otherDiv = $('.one div:nth-child(3)');
console.log(firstDiv);
console.log(lastDiv);
console.log(otherDiv);

:not(selector)
去除所有与给定的选择器匹配的元素

var input = $('input:not(:checked)');
console.log(input); // 选中没有被勾选的checkbox

<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">

:even
匹配所有索引值为偶数的元素，从0开始

:odd
匹配所有索引值为奇数的元素，从0开始

// var input = $('input:even');
var input = $('input:odd');
console.log(input);

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

:eq(index)
匹配一个给定索引值的元素
var input = $('input:eq(3)');

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

:contains(text)
匹配包含给定文本的元素

var div = $('div:contains("hello")');
console.log(div); // <div>hello</div>

<div>hello</div>
<div>hell</div>
<div>hel</div>
<div>he</div>

:has(selector)
匹配含有选择器所匹配的元素的元素

//var div = $('div:has(p)');
var div = $('div:has(.one)');
console.log(div);

<div>
<p class="one">段落一</p>
</div>
<div>
<p>段落二</p>
</div>
<div>hel</div>

10) 属性选择器
[attribute]
匹配包含给定属性的元素

// var div = $('div p[class]');
var div = $('div p[name]');
console.log(div);

<div>
<p class="one">段落一</p>
</div>
<div>
<p name="test">段落二</p>
</div>
<div>hel</div>

11) selected
:selected
匹配所有选中的option元素

12) checked
:checked
匹配所有选中的被选中元素(单选框、复选框)

13) checkbox
:checkbox
匹配所有复选框

0、如何实现鼠标点击当前的li，给它添加背景色，其他li没有背景色？
siblings()
含义：
返回被选元素的所有同级元素(同级元素是指共享相同父元素的元素)
语法：
$A.siblings() 选中所有与A同级的元素

1、如何实现查询文章，并且显示到页面？
1) 底层ajax
$.ajax({
//请求后台的地址
url:'',
//请求方式 get post put ...
method:'get',
//携带的数据，传递给后台的数据
data:{},
//请求成功的回调函数
success:function(res){},
//请求失败的回调函数
error:function(err){}
})

1、没有参数
$.ajax({
url:'http://47.106.244.1:8099/manager/category/findAllCategory',
method:'get',
data:{},
success:function(res){
console.log(res.data)
}
})

2、需要前端传递数据
$.ajax({
url:'http://47.106.244.1:8099/manager/article/findArticle',
method:'get',
data:{
page:0,
pageSize:10,
},
success:function(res){
console.log(res.data.list)
}
})

2) 简化ajax
$.get(url,data,function(){});
$.post(url,data,function(){});

2、如何实现点击左侧导航栏，实现右侧切换对应的页面？
load()
问题：
再浏览器打开时，无法切换，并且保存跨域，是由于浏览器对静态页面有限制
解决：
方法一：将项目部署到阿里云服务器上
方法二：vscode编辑器下载插件 live server ，下载完成后，关闭vscode后重新打开，右击open with live server

最爱谭先森

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记

项目开发 html5 + css3 + javascript 第一阶段的重构网页页面仔复杂，比较慢，DOM驱动 bootstrap + jQuery + ajax 省略很多DOM操作，比较快捷，DOM驱动 vue + element-ui + axios 非常快，几乎不涉及DOM操作，数据驱动bootstrap 1、介绍利用 BootstrapCDN 和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架...
复制链接

扫一扫