Jquery开发&BootStrap

最新推荐文章于 2022-06-01 15:33:11 发布

Kerwin_YF

最新推荐文章于 2022-06-01 15:33:11 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/Kerwin_YF/article/details/105459887

版权

jQuery

一、jQuery介绍

1. 什么是jQuery（类似于python中的模块）

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。另外它只是封装了js的dom的操作和ajax，其它的未封装。所以js是包含jquery的。由此可见，jquery的出现，使我们更加容易操作DOM。

核心思想：write less,do more 写的少做的多

关于jQuery的相关资料：

官网：http://jquery.com/
官网API文档：http://api.jquery.com/
汉化API文档：http://www.css88.com/jqapi-1.9/

2. jQuery使用

①下载：

https://jquery.com/download/
在这里插入图片描述
下载下来只是一个JavaScript脚本文件

②引用

通过script标签的src属性引用
<script src="jquery-3.5.0.js"></script>

③基础使用

获取元素节点

<body>
	<div id="box"></div>

	<!-- 引包 -->
	<script src="jquery-3.5.0.js"></script>
	<script type="text/javascript">
		console.log(jQuery('#box'));
	</script>
</body>
打印结果：
jQuery.fn.init [div#box]
0:div#box
length:1
__proto__:Object(0)

直接通过jQuery(‘元素选择器名称’)获取到元素节点的数组，可以通过索引取出元素

jQuery对象转换为js对象
jQuery('#box')[0]
//也可以调用get(0)方法
jQuery("#box").get(0)

var oBox = document.getElementById('box');
以上两种方式效果相同

js对象转为jQuery对象

var oBox = document.getElementById('box');
console.log(jQuery(oBox));

在jQuary（）中传入元素节点就转换为jQuery对象
在jQuery（）中传入元素选择器就转换为元素节点

jQuery的匿名函数$

jQuery("#box") = $("#box")
jQuery可以替换为美元符号

jQuery对象的text方法——获取元素的文本

<p>Hello World!</p>
console.log($('p').text());
打印结果为：Hello World!

jQuery对象的html方法——获取元素的html语句

<div>
    <a href="#">百度一下</a>
</div>

console.log($('div').html());
打印结果：<a href="#">百度一下</a>

$('div').html('<p>Hello</p>')
在html中传入字符串代表在div标签中写入html语句

jQuery对象的addClass方法——为元素添加类

<p>Hello World!</p>
$('p').addClass('box');
为p标签添加了box类名
<p class="box">Hello World!</p>

二、基础核心

1. 代码风格

在jQuery程序中，不管是⻚⾯元素的选择，内置的功能函数，都是美元符号 $ 来开始的。⽽这个 $ 就是jQuery对象，所以我们在⻚⾯元素选择或执⾏功能函数的时候可以这样写：

$(function () {}); //执⾏⼀个匿名函数
$('#box'); //进⾏执⾏的ID元素选择
$('#box').css('color', 'red'); //执⾏功能函数

由于$本身就是jQuery对象的缩写形式，那么也就是说上⾯的三段代码也可以写成如下形式：

jQuery('#box').css('color','red');
console.log(jQuery===$);//true

并且，每次执⾏函数后，都会返回⼀个jQuery对象。如下：

$('#box').css('color', 'red').css('fontsize', '50px'); //链式编程

2. 加载模式（入口函数）

①onload入口函数和ready入口函数

		// 1. js的入口函数
		window.onload = function () {
			// 执行代码
		}

		// 2. jQuery的入口函数
		文档加载完毕，图片不加载的时候，就可以执行这个函数
		$(document).ready(function(){
			// 执行代码
		})
		文档加载完毕，图片也加载完毕的时候，在执行这个函数
		$(window).ready(function () {
           alert(1);
        })

$(document)传入js中的document对象，获取到jQuery对象，再调用ready方法

②onload和ready区别

在这里插入图片描述

	<script src="jquery-3.5.0.js"></script>
	<script type="text/javascript">
		// 1. onload方式：第二次覆盖第一次，只打印test1
		window.onload = function(){
			console.log('test1');
		}
		window.onload = function(){
			console.log('test2');
		}
		// 2. ready方式：互不影响，打印test1和test2
		$(function () {
			console.log('test1');
		})
		$(function () {
			console.log('test2');
		})
	</script>

3. 对象互换及处理多个库之间的冲突

①对象互换

alert($);//返回jQuery对象⽅法内部函数
alert($());//[object object]，返回jQuery对象
alert($("#box"));//[object object]，返回
jQuery对象
alert(document.getElementById("box"));
//[object HTMLDivElement]，返回原⽣DOM对象

jQuery获取原⽣的DOM对象
$(’#box’).get(0)
//或者
$(’#box’)[0]
DOM对象转化成jQuery对象
var oBox = document.getElementById(‘box’)
$(oBox);

②多个库变量$冲突

撞库现象
第一步：创建另一个自定义index库，定义$为3
var $ = 3;
第二步：同时引入index库和jQuery库，打印$看等于3还是等于jQuery对象函数

<body>
	<div id="box">Kerwin</div>
	<script src="jquery-3.5.0.js"></script>		引入jQuery库
    <script src="index.js"></script>	引入index库
	<script type="text/javascript">
        console.log($);		打印结果为3
		$(function () {
                $('#box').css('color','red').css('font-size','50px');
            })
	</script>
</body>

后引入的index库会将jQuery库中的同一个变量$覆盖，改成了3，所以对box元素的css设置失效了

解决多个库变量名冲突的方法
第一步：调用jQuery.noConflict()方法
将jQuery的美元变量$ 控制权交给其他的js库
第二步：运用自执行函数将$代替jQuery
什么是自执行函数

(function foo(a,b){
  return sum = a + b
;})(1,2)
在函数表达式完成后直接调用并传参（1,2）

( function ( " 参数 " ) { " 函数方法 " ; } ) ( " 给参数传的值 " )
两个括号
第一个括号：函数表达式
第二个括号：传参

在这里插入图片描述

三、jQuery选择器

jQuery选择器的作用：选中当前的元素（返回一个jQuery对象），然后拿到这个对象做相应的DOM操作

1. 基础选择器

1. ID选择器
$("#id");

2. class选择器
$(".class");

3. 标签选择器
$("p");

4. 通配符选择器
$("*");

5. 组合选择器
$("p,li,a");

我们可以采⽤jQuery核⼼⾃带的⼀个属性 length 来查看返回的元素个数。
console.log($(“div”).length)

2. 层级选择器

1. 后代选择器
$("ul li");

2. 子代选择器（选取直系亲儿子）
$("ul>li");

3. 紧邻选择器+
$(".item1+li");——获取紧挨着item1的下一个li标签（如果查找不到则为空）

4. 自己之后的所有兄弟选择器~
$(",item1~li");——获取item1这个标签之后的的其他兄弟li标签

3. 过滤选择器

<ul>
    <li id="item1"></li>   
    <li id="item2"></li>   
    <li id="item3"></li>   
    <li id="item4"></li>   
</ul>

1. :first取出第一个
$('li:first');
取出了item1的li标签

2. :last取出最后一个
$('li:last');
取出了item4的li标签

3. :not(selector)去除所有与给定选择器匹配的元素
$('li:not(#item2)');
取出除了item2以外的item 1、3、4

4. :even索引为偶数（索引从 0 开始）
5. :odd索引为奇数（索引从 0 开始）
$('li:even')
取出索引为偶数的0,2对应的item1和item3标签

6. :gt(index)索引⼤于index
7. :lt(index)索引小于index
$('li:gt(2)')
取出索引大于2的item4

8. :eq(index)索引等于 index 的元素（index 从 0 开始）————————非常重要!!!!!!!!!!!
$('li:eq(2)')
取出索引等于2的item3

4. 内容过滤选择器

根据子元素或者内容来过滤父元素

1. :contains('张三') 查找⽂本中含有 “张三” 的元素
2. :empty 匹配所有不包含⼦元素或者⽂本的空元素
3. :has('p') 含有p元素的父元素（p元素可以是后代的也可以是子代的，只要有就可以获取到）
4. :hidden 选取所有不可⻅的元素（display为none）
5. :visible 选取所有可⻅的元素

5. 属性过滤选择器

通过元素属性来过滤

1. [attribute] 拥有此属性的元素
$("div[id]") 选择所有拥有 id 属性的 div

2. [attribute=value] 属性的值为 value的元素————————非常重要！！！！
$("div[tittle =test]") 选择属性 title为 test 的 div

3. [attribute!=value] 属性的值不为value 的元素
4. [attribute^=value] 属性的值以 value开始的元素

6. 子元素过滤选择器

1. :first-child 选取每个⽗元素第⼀个⼦元素
p:first-child 如果p标签是父元素的第一个子元素，那么它就会被选中

2. :last-child 选取每个⽗元素最后⼀个⼦元素
3. :only-child 如果某个元素是它⽗元素中唯⼀的⼦元素，则会被匹配
4. :nth-child(index) 选取每个⽗元素下的第 index ⼦元素或者奇偶元素（index 从 1开始）

7. 表单选择器

1. :input 选取所有的 <input><textarea> <select><button>
2. :text 选择所有单⾏⽂本框
3. :password 选择所有的密码框
4. :radio 选择所有的单选框
5. :checkout 选择所有的多选框
6. :submit 选择所有的提交按钮
7. :image 选择所有的图像按钮
8. :reset 选择所有的重置按钮
9. input:button 选择所有的按钮
10. input:file 选择所有的上传域
11. :hidden 选择所有的不可⻅元素

8. 表单过滤选择器

1. :enabled 选取所有可⽤元素
2. :disable 选取所有不可⽤元素
3. :checked 选取所有被选中元素（复选框、单选框）
4. :selected 选取所有被选中元素（下拉列表）

9. jQuery选择器完善的处理机制

如果通过$(‘选择器’)获取到的元素不存在时，甚至调用这个不存在元素的方法时jQuery也不会阻塞报错
不可行的方法——通过判断$(‘选择器’) = true
如果选择器获取不到元素，它依然是一个空的jQuery对象，因此无法用true判断
jQuery.fn.init [prevObject: jQuery.fn.init(1)]
推荐方法——通过判断$(‘选择器’)的长度

//判断获取到的数组长度是否不为0
if ($('#box').length > 0){
    alert('获取到元素了');
}else{
	//否则弹出错误，有利于排查问题
    throw new Error('获取元素失败')
}

四、jQuery中的DOM操作

1. HTML的DOM操作

①创建节点

$(’< h3>hello< /h3>’);

②插入节点

父子之间的操作<.font>

append()方法——向每个匹配的元素内部追加内容
$(A).append(B) 将 B追加到 A 中
append可以插入描述元素的文本、js创建的元素、jQuery对象

1. 描述元素的文本
$('#box').append('<h3>hello</h3>');

2. js创建的元素
var h3Tag = document.createElement('h3');
h3Tag.innerHTML = 'Hello World';
$('#box').append(h3Tag);

3. jQuery对象
$('#box').append($('#item2'));
注意：当#item2是静态页面上的元素被选中时，append方法是移动了原静态页面的标签

appendTo()方法——将所有匹配的元素追加到指定元素中
$(B).appendTo(A)将 B 追加到 A 中

$('<h3>Alex</h3>').appendTo('#box');
将刚刚创建的h3标签追加到box标签里面

prepend() / prependTo()
与append和appendTo方法一致，只不过appen是在后方追加，prepend是在前方追加

兄弟之间的操作<.font>

after()方法——在每个匹配的元素之后插⼊内容

$(A).after(B) 将 B 插⼊到 A 后⾯
示例：$('#box').after('<p>P</p>');

insertAfter()方法——将所有匹配的元素插⼊到指定元素的后⾯

$(B).insert After(A) 将 B 插⼊到A 后
示例：$('<p>Hello</P>').insertAfter('#box')

before() / insertBefore()
与after和insertAfter方法一致

③删除节点

remove()方法

<div id="box">
    <button>删除按钮</button>
</div>

$('button').click(function(){
    //console.log(this);
    //console.log($(this));
    $(this).remove();
})
注意：
第一个this是DOM节点对象：<button>删除按钮</button>
第二个$(this)是jQuery对象（可以调用remove方法）：jQuery.fn.init [button]

detach()方法
detach与remove对比：

相同点
调用方法一模一样
都会返回被删除的这个jQuery对象
不同点
remove——既删除节点，又删除节点上的绑定事件
detach——仅仅删除节点，事件保留

empty()方法
清空元素中所有的后代节点。注意是清空元素内的所有节点，并不清除选中的元素

只清空后代节点，并不会清除自身
$('div').empty();

修改html为空字符也有清空效果
$('div').html('');

④复制节点

clone()方法

设置ul下的每个li被点击后都会复制一个新的追加到ul下
$("li").click(function(){
	$(this).clone().appendTo("ul");
})

这样复制只会复制节点，不会复制事件
要想复制事件，就需要给colon加上参数true（默认false）
$("ul li").click(function(){
  $(this).clone(true).appendTo("ul");
})

⑤替换节点和包裹节点

替换节点replaceWith()和replaceAll()

1. replaceWith('</b')将所有匹配的元素替换成指定的HTML或DOM元素
//将所有的span标签替换为a标签
$('span').replaceWith('<a href="">百度一下</a>');

2. replaceAll(selector)⽤指定的元素替换掉所有匹配到的元素
//用a标签替换掉所有的p标签
$('<a href="">百度一下</a>').replaceAll('span')

包裹wrap()和解包裹unwrap()

<span>张三</span>
<span>李四</span>

1. wrap()方法——把所有匹配的元素⽤其他元素的结构化标记包裹起来
//将span标签用div包裹起来（class为name）
$('span').wrap('<div class = "name"></div>');
//新的html为：
<div class = "name">  <span>张三</span>  </div>
<div class = "name">  <span>李四</span>  </div>

2. unwrap()方法——这个⽅法将移出元素的⽗元素
$('span').unwrap()

wrapInner()方法
将每⼀个匹配的元素的⼦内容(包括⽂本节点)⽤⼀个HTML结构包裹起来

<p>
    <span>Hello</span>
</p>

//将p标签下的span标签用div包裹起来
$('p').wrapInner('<div></div>');
//新的html为：
<p>
    <div>
        <span>Hello</span>
    </div>
</p>

⑥属性操作

attr()方法——获取和设置元素属性
传递⼀个参数为获取元素属性，传递两个参数为设置元素属性

1. 设置单个属性值
	$('div').attr('id','box');

2. 设置多个属性值
	$('div').attr({'class':'active','id':'box'});

3. 查询属性值
	$('div').attr('id')

4. 删除属性 removeAttr()
	$('div').removeAttr('id');

⑦类操作

1. addClass() 添加类
	$('div').addClass('active');

2. removeClass() 删除类
	$('div').removeClass('active');

3. hasClass() 判断是否有类名
	有返回true，没有返回false
	$('div').hasClass('active')

4. toggleClass() 切换类名
	如果类名存在则删除，如果类名不存在则添加
	$('div').toggleClass('active')

⑧值操作

html()方法——读取或者设置某个元素中的HTML内容
没有参数为获取HTML 中的内容，传递⼀个参数为设置 HTML 的内容

<ul>
    <li>
        <a href="#">百度一下</a>
    </li>
</ul>

1. 不传参代表获取html值
	console.log($('li').html());
	打印结果：<a href="#">百度一下</a>

2. 传参代表修改html值
	$('li').html('<span>Alex</span>');
	将a标签的百度一下替换为span标签的Alex

text()方法——读取或者设置某个元素中的⽂本内容
没有参数为获取⽂本内容，传递⼀个参数为设置⽂本内容
与html()方法的区别在于html可以获取html和文本，而text仅仅获取文本
val()方法——读取或设置元素的值
在⽤于表单元素时，可以设置相应的元素被选中

1. 获取文本输入框的值
	<input type="text" value="美女">
	console.log($('input[type=text]').val());

2. 设置文本输入框的值
	$('input[type=text]').val('帅哥');

3. 设置下拉单选列表默认的值
	<select name="" id="">
	    <option>苹果</option>
	    <option>香蕉</option>
	    <option>西瓜</option>     
	</select>
	设置默认选项为香蕉
	$('select').val('香蕉');

4. 设置下拉多选列表默认的值——传入多个参数（数组）
	<select multiple='multiple'>
	    <option>苹果</option>
	    <option>香蕉</option>
	    <option>西瓜</option>     
	</select>
	设置默认选项为香蕉，西瓜
	$('select').val(['香蕉','西瓜']);

5. 设置复选框的默认值
	<input type="checkbox" value="A">语文
	<input type="checkbox" value="B">数学
	<input type="radio" value="C">男
	<input type="radio" value="D">女
	设置默认语文，男被勾选
	$('input').val(['A','C']);

注意：input设置默认值需要用value的值，select设置默认值用的是文本

⑨筛选方法

1. children()方法——获得匹配元素的⼦元素的集合 （⼦元素非后代元素）
    <div>
        <p>Alex</p>
        <ul>
            <li>MJJ</li>
        </ul>
    </div>
    获取div标签子元素的p和ul
    $('div').children()//注意：通过索引调出来的是DOM节点，不可以使用text()等jQuery对象的方法，需要转换
    获取div标签子元素的p标签
    $('div').children('p')

2. next()方法——获得匹配元素后⾯紧邻的同辈元素
   prev()方法——获得匹配元素前⾯紧邻的同辈元素
    <ul>
        <li id="item1">Alex</li>
        <li id="item2">Egon</li>
        <li id="item3">MJJ</li>
    </ul>
    获取出来的是紧跟后面的同级元素item2
    console.log($('#item1').next());

3. parent()方法——获取父级元素
   parents()方法——获取所有祖先元素
    <ul>
        <li>Alex</li>
    </ul>  
    获取出来的是父标签ul（DOM节点并不是jQuery对象）
    console.log($('li').parent()); 
    获取出来的是祖先节点（ul, body, html）
    console.log($('li').parents());
4. eq()方法——获取固定index的元素（jQuery对象）
    <ul>
        <li>Alex</li>
        <li id="item1">MJJ</li>
        <li>Egon</li>
    </ul>
    获取第二个index为1的对象（获取出来的是jQuery对象，可以直接链式编程）
    $('ul').children().eq(1);

siblings()方法——获得匹配元素前后⾯紧邻的同辈元元素
$(‘li’).siblings(‘li’)代表取得li标签前后所有的同级li标签

案例——设计按钮点击背景变红事件（按钮之间互斥）
<ul>
    <li>
        <button>按钮1</button>
    </li>
    <li>
        <button>按钮2</button>
    </li>
    <li>
        <button>按钮3</button>
    </li>
</ul>

$('button').click(function(){
	$(this).css('background-color','red').parent().siblings('li').children('button').css('background-color','#fff');
})
逻辑：设置按钮button被点击变红，然后取得它父级元素li的所有同级li标签的子标签button，设置变白（互斥）

⑩遍历方法

-语法
$(selector).each(function(index,element))

index - 选择器的 index 位置
element - 当前的元素（也可使用 “this” 选择器）

$("button").click(function(){
	  $("li").each(function(){
	    alert($(this).text())
	  });
});

jQuery对象的index()方法

获得第一个匹配元素相对于其同胞元素的 index 位置

<ul>
	<li>Coffee</li>
	<li id = 'item'>Milk</li>
	<li>Soda</li>
</ul>

$('#item').index()得到的是第二个li的索引值：1

2. CSS的DOM操作

CSS()方法
读取和设置 style 对象的各种属性
如果值是数字，将会⾃动转化为像素值，样式名不带引号“”，样式使⽤驼峰写法

1. 传1个参数——获取样式属性值
console.log($('div').css('color'));
打印结果：rgb(0, 0, 0)

2. 传2个参数——设置样式
$('div').css('color','red');

3. 设置多个样式：
$('div').css({
 width:'200px',
 height:'200px',
 backgroundColor:'yellow'
});
中间用逗号隔开，样式名不带引号的话就用驼峰写

offset()方法
获取元素在当前视窗的相对偏移，返回的对象包含两个属性 top 、 left

4. 获取元素在当前窗口的相对偏移量，取出来的是一个对象，里面保存着top和left属性
$('div').offset()
打印结果：{top: 8, left: 8}，可以通过.left或者.top取出

position()方法
获取元素相对于最近⼀个position样式属性设置为relative或者absolute的⽗节点相对偏移
scrollTop()和scrollLeft()
获取元素滚动条距离顶端的距离
获取元素滚动条距离左侧的距离
实现滚动导航栏出现的效果

设置导航栏固定定位
  <div class="header">我是导航栏</div>
  <div class="content">我是内容栏
      <div id="box"></div>
  </div>
$(window).scroll(function(){	//监听页面滚动行为
    var scrollTop = $(window).scrollTop()	//获取页面滚动距离顶端的距离
    if(scrollTop >= $('#box').offset().top){	//如果页面滚动顶端距离大于元素到页面顶端的举例，就打开导航栏
        $('.header').stop().slideDown(1000);	//1秒下拉导航栏，打开之前先关闭
    }else{
        $('.header').stop().slideUp(1000);
    }
})

盒子宽高相关方法

1. width()/height() 获取和设置宽度和⾼度
不传参代表获取
//console.log($('div').css('width'));	通过css获得宽是字符串的：200px
console.log($('div').width());	通过width方法获得的是数字：200
传参代表设置宽高
console.log($('div').width('300px'));	设置宽度为300

2. innerWidth()/innerHeight() 获取匹配元素内部区域宽度(包括补⽩,不包括边框)
//等于width+padding
console.log($('div').innerWidth());

3. outerWidth()/outerHeight() 获取匹配元素外部宽度(默认包括补⽩和边框)
//等于width+padding+border
console.log($('div').outerWidth());

3. CSS的特效效果

.hide()和.show()方法——显示隐藏效果
$(‘div’).show();——代表展示盒子，等同于css(‘display’,‘block’)
$(‘div’).hide();——代表隐藏盒子，等同于css(‘display’,‘none’)
还可以设置参数：hide(1000)代表在1秒内消失（收缩效果）
hide(1000,function(){})传2个参数可以在1秒后执行函数
fadeIn()和fadeOut()方法——淡入淡出效果
$(‘div’).fadeIn()——让盒子渐渐显示
$(‘div’).fadeOut()——让盒子渐渐消失
还可以设置参数：fadeIn(1000)代表在1秒内淡入
slideDown()和slideUp()方法——下拉上拉效果
$(‘div’).slideDown();——让盒子下拉下来（显示）
$(‘div’).slideUp();——让盒子上滑（消失）
还可以设置参数：slideDown(1000)代表在1秒内下拉显示
stop()——停止动画效果
由于特效属于异步调用，开启动画前需要先停止动画

五、jQuery中的事件

1. 鼠标事件

①click、dblclick、mousedown、mouseup、mousemove事件

以上事件都使用回调函数
$(‘div’).click(function(){})
等同于:
var click(foo){
function(){}
}

click——单击事件
dblclick——双击事件
mousedown——鼠标按下事件
mouseup——鼠标抬起事件
mousemove——鼠标移动事件
$(‘div’).mousemove(function(){}) 鼠标必须在这个盒子里面移动才会执行事件

②mouseenter、mouseleave、mouseover、mouseout事件

mouseenter和mouseleave——常用！
鼠标在在悬浮被选元素才会触发事件

<div class="father">
    <div class="child"></div>
</div>
设置父盒子悬浮显示子盒子，拿走隐藏子盒子时
mouseenter和mouseleave可以悬浮父盒子后鼠标放在子盒子上子盒子不会消失
mouseover和mouseout一旦鼠标离开父盒子去子盒子，子盒子就会隐藏

mouseover和mouseout
鼠标悬浮被选中元素或该元素的子元素都会触发事件

③focus和blur事件

聚焦和失焦事件，通常用于input输入框
在这里插入图片描述

1. 直接聚焦
$('input').focus()

2. 聚焦事件
$('input').focus(function(){
    console.log('聚焦了');
})

3. 失焦事件
$('input').blur(function(){
    console.log('失焦了');
})

4. 阻止input输入框聚焦（不可输入）
$('input').focus(function(){
    this.blur();
})
这里的this是DOM节点，不是jQuery对象

④keydown和keyup

检测键盘按下和抬起行为

使用window的jQuery对象去调用(也可使用input输入框调用)
$(window).keydown(function(){
    console.log('键盘按下了');
})

获取键盘按钮的值：
keycode值对照表：https://www.cnblogs.com/lxwphp/p/9548823.html

$(window).keydown(function(event){
    console.log(event.keyCode);               
})

2. 表单事件

①change()

仅仅适用于文本标签，input、textarea、select
在元素失焦时，检测文本的值是否发生改变
$(‘input[type=text]’).change(function(){
console.log(‘值发生变化了’);
})

②submit()

应用于form表单提交事件，在submit类型的input提交时触发事件
在这里插入图片描述

<form action="">
    <input type="text" placeholder="输入用户名">
    <input type="submit">
</form>
//submit必须由form标签触发
$('form').submit(function(event){
	//默认提交后会刷新页面，如果要对数据进行处理可以通过event.preventDefault()阻止默认操作
    event.preventDefault();
    console.log("数据准备提交了");
})

阻⽌默认事件
网页中有自己的默认行为，例如单击超链接会跳转，单击“提交”按钮后表单会提交，有时需要阻止默认⾏为。
jQuery 提供了 preventDefault() 方法来阻止元素的默认⾏为。
也可以通过return false；阻止

3. 事件冒泡

当父元素与子元素都设置了自己的click事件，那么点击子元素时会向冒泡一样逐级去触发父、祖先级的点击事件，这就是冒泡机制

组织事件冒泡：
针对子元素调用event.stopPropagation()

<div id="father">
    <div id="child"></div>
</div>

$('#father').click(function(){
    console.log('father');    
})
$('#child').click(function(event){
    console.log('child');
    //子元素click时调用方法，阻止冒泡
    event.stopPropagation();    
})

第二种方法是直接在子元素点击事件后return false；
既可以阻止冒泡，也可以阻止一些默认行为（例如a标签跳转）

事件对象的属性

⽅法名称	描述
event.type	获取到事件的类型
event.preventDefault()	阻⽌默认的事件⾏为
stopPropagation()	阻⽌事件冒泡
event.tagent()	获取到触发事件的元素
event.relatedTarget()	mousover 和 mouseout 所发⽣的元素
event.pageX、event.pageY	获取到光标相对于⻚⾯的 x坐标和 y 坐标
event.which()	⿏标单击事件中获取到的左、中、右键，在键盘事件中获取键盘的按键
event.metaKey()	为键盘事件获取 ctrl 键

4. 事件代理（on方法）

写好的JS加载到页面上时，只能对当前存在的元素绑定事件，如果未来动态地插入元素，那么该事件将不会绑定到它身上
在这里插入图片描述

<body>
    <ul>
        <li>博客文章1</li>
    </ul>
	<script src="jquery-3.5.0.js"></script>
    <script type="text/javascript">
        $(function(){
            $('li').click(function(){
                console.log($(this).text());
            })
            //5秒后插入新的节点
            setTimeout(function(){
                $('ul').append('<li>博客文章2</li>')
            },5000)
        })
	</script>
</body>

解决未来出现的元素事件绑定问题：
在父级元素上设置on方法——代理绑定事件
$(’father’).on(“事件名”，“子元素的选择器”，“执行函数”）

$('ul').on('click','li',function(){
    console.log($(this).text());
    
})

5. 合成事件hover() toggle()

hover()
hover(fn1,fn2,…fnN) ⽅法⽤于模拟光标悬停事件，当光标移动到元素上时，会触发第⼀个函数（mouseenter），当光标移出这个元素时会触发第⼆个函数（mouseleave）

$('div').hover(
    function foo1 (){
        $(this).css('backgroundColor','green')
    },
    function foo2 (){
        $(this).css('backgroundColor','red')
    }
)

toggle()
点击切换显示或隐藏

点击按钮切换盒子的显示或隐藏
$('button').click(function(){
    $('div').toggle();
})

6.one方法——一次性事件

语法： $(selector).one(event,data,function)
data可不填，是规定传递到函数的额外数据

单击一次改变盒子背景色，只生效一次
$('div').one('click',function(){
    $('div').css('backgroundColor','green');
})

六、jQuery中的动画效果

1. 动画种类

参数
jQuery 中的任何动画效果，都可以指定三种速度参数，slow、normal、fast，对应的时间⻓度分别是 0.6 秒，0.4 秒和 0.2 秒
也可以传⼊参数，传⼊数字作为参数不需要加引号，使⽤关键字需要加引号。
都可以添加回调函数
hide() show()
显示或隐藏
同时修改多个样式属性，即⾼度、宽度和不透明度
fadeIn() fadeOut()
淡入或淡出
只改变不透明度
fadeTo()——指定淡化到多少的透明度
三个参数：fadeTo(时间，透明度，回调函数）#回调函数可不写

	$('div').fadeTo(1000,0.3,function(){
	    console.log('done');     
	});

slideUp() slideDown()
只改变⾼度
toggle()
⽤来代替 hide() 和 show() ⽅法
slideToggle()
⽤来代替 slideUp() 和 slideDown()
fadeToggle()
⽤来代替 fadeIn() 和 fadeOut()

2. 自定义动画animate()

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
语法：$(选择器).animate(目标样式，转换事件，回调函数)

$('div').animate({
    width:'400px',
    height:'400px',
    'backgroundColor':'green'
},2000)

注意：原生jQuery无法更改自定义动画的颜色，需要增加插件
第一步：下载uncompress的jquery-color代码（https://github.com/jquery/jquery-color）
第二步：引入< script src=“jquery.color.min.js”></ script>

3. 动画操作

停止动画
stop([clearQueue,gotoEnd])
延迟动画delay()

对不同的 <div> 元素设置延迟：
$("button").click(function(){
    $("#div1").delay("slow").fadeIn();
    $("#div2").delay("fast").fadeIn();
});

判断元素是否处于动画状态

返回值：
true在动画状态
false不在动画状态
if(!$("div").is(":animated")){
	//执行代码
}

七、后端交互技术——ajax

1. 什么是ajax

ajax技术：在不重载页面的情况下，与页面进行更新
通常网页不会由window.onload一次性加载完成，会先加载局部，这就需要ajax支持更新页面

2. 基本语法

$.ajax({
    //交互服务器的API地址
    url:'....',
    //交互模式：get还是post
    method:'get',
    //回调函数：接收服务器返回的值
    success:function(res){
        console.log(res);
    },
    error:function(err){
    	console.log(err)
    }
})

2. 模拟第三方接口：和风天气API

第三方网址：https://dev.heweather.com/
如何获取天气数据：（API文档）https://dev.heweather.com/docs/api/weather
在这里插入图片描述
根据指引，获取URL：https://free-api.heweather.net/s6/weather/now?location=shanghai&key=1e4f41e1eb93406fb1df7542ee9c6679

3. get请求——获取后台数据

在这里插入图片描述

$.ajax({
    //交互服务器的API地址
    url:'https://free-api.heweather.net/s6/weather/now?location=shanghai&key=1e4f41e1eb93406fb1df7542ee9c6679',
    //交互模式：get还是post
    type:'get',
    //回调函数：接收服务器返回的值
    success:function(res){
        //判断服务器连接状态是否OK
        if (res.HeWeather6[0].status === 'ok') {
            //取出天气晴这个值
            var weather = res.HeWeather6[0].now.cond_txt;
            console.log(weather);
        }
    }
})

3. post请求——上传数据

$.ajax({
    //上传服务器的地址（get地址？后面是传递的参数，post不需要）
    url:'https://free-api.heweather.net/s6/weather/now',
    //交互模式：post
    type:'post',
    //上传的数据
    data:{
        username:'张三',
        password:'123456'
    },
    //回调函数：接收服务器返回的值
    success:function(res){
        //判断服务器是否接收成功
    }
})

Bootstrap

一、响应式页面

在电脑上写好的页面，在不同设备（手机，平板）上打开会混乱，响应式页面可以自适应设备的屏幕大小

①CSS3的@media查询

可以针对不同的屏幕大小定义不同的样式

@media mediaType and|not|only (media feature){
	/*CSS-code;*/
}

mediaType：媒体类型，常用的有screen（用于电脑，平板，手机）；speech（用于屏幕阅读器等发声设备）
and|not|only：代表条件且，非，仅
meaid feature：

max-width：定义输出设备中的页面最大可见区域宽度
min-width：定义输出设备中的页面最小可见区域宽度

②开始编写响应式页面

准备工作1：设置meta标签
首先在使用@media的时候需要设置以下代码，来兼容移动设备的展示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

width=device-width：宽度等于当前设备的宽度
initial-scale=1.0：初始的缩放比例（默认为1.0，代表不缩放）
user-scalable=no：用户是否可以手动缩放（默认为no，我们不希望用户放大缩小页面）

准备工作2：加载兼容JS
因为IE8既不支持HTML5也不支持CSS3 @media，所以需要加载2个JS文件，实现兼容

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准备工作3：设置IE渲染方式默认为最高
让IE的文档渲染模式永远是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

chrome=1，如果用户安装了Chrome浏览器，就可以让不管哪个IE版本都可以使用webkit引擎及V8引擎进行排版和运算，否则就显示IE最新的渲染模式

二、@media媒体查询

示例代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	/* 兼容移动设备的展示效果 */
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> -->
	/* 加载兼容JS */
	<!--[if lt IE 9]>
	　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->
	/* 设置IE渲染方式默认为最高 */
	<!-- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1"> -->
	<title>Bootstrap</title>

	<style type="text/css">
		/*宽度大于1200显示红色*/
		@media screen and (min-width: 1200px) {
			body{
			background-color: red;
			}
		}
		/*宽度在900-1200之间显示黄色*/
		@media screen and (min-width: 900px) and (max-width: 1199px) {
			body{
				background-color: yellow;
			}
		}
		/*宽度小于900显示蓝色*/
		@media screen and (max-width: 900px) {
			body{
				background-color: blue;
			}
		}
	</style>
</head>
<body>

</body>
</html>

三、Bootstrap的下载和基本使用

网址：https://www.bootcss.com/
导航栏依次点击：Bootstrap3中文文档→起步

名词解析：less和sass
less和sass是比CSS更高级的语言
优点：集成了CSS的样式，对选择器、逻辑（if，运算）处理地更加简便，代码简单
缺点：浏览器只识别HTML，CSS，JS，不识别LESS和SASS语言，需要额外的LESS或SASS的编译器转换为CSS等浏览器可识别的语言

第一步：先将生成环境的Bootstrap下载下来

第三步：复制基本模板
第四步：第一个Bootstrap页面

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- 1. 让IE的文档渲染模式永远是最新的 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 2. 媒体查询视口设置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Kerwin</title>

    <!-- 3. 引入Bootstrap -->
    <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!-- 4. 如果需要兼容IE8以下设置JS -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>

在head标签中通过网络引入Bootstrap

Bootstrap 核心 CSS 文件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Bootstrap 核心 JavaScript 文件

<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

四、Bootstrap的全局CSS样式

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果

①HTML5 文档类型

必须使用HTML5的文档进行编写项目

②移动设备优先

视口设置

可触屏缩放

<meta name="viewport" content="width=device-width, initial-scale=1">

不可触屏缩放（user-scalable=no）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

③Normalize.css

效果等于我们自己编写的reset.css，清除html的默认样式

④布局容器（重要）

为标签添加.container类，使用margin:0 auto的效果，分为两种：

.container 类用于固定宽度（居中）并支持响应式布局的容器（设置了媒体查询）

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container-fluid">
  ...
</div>

在这里插入图片描述

五、Bootstrap的栅格系统（grid system）

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
鼻祖：960 grid system
在这里插入图片描述

①简介

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
类似 .row 和 .col-xs-4（xs码，每列包含4栅） 这种预定义的类，可以用来快速创建栅格布局
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列

②框架示例：

在这里插入图片描述

大屏幕时：col-lg-3每列占3个栅栏（12除以4列）
中等屏幕时：col-md-4每列占4个栅栏（12除以3列）
小屏幕时：col-sm-6每列占6个栅栏（12除以2列）
Bootstrap自动设置了浮动并清除了浮动：例如::after

③代码示例：

在这里插入图片描述

<div class="container">
  <div class="row">
		
        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail">
            <div class="child"></div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail">
            <div class="child"></div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail">
            <div class="child"></div>
          </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-3">
          <div class="thumbnail">
            <div class="child"></div>
          </div>
        </div>
        
  </div>
</div>

class=“thumbnail”
将自己的内容包裹在col-xx-xx类中，再包裹在thumbnail类中，用thumbnail类来设置盒子里的样式

六、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）
例如，.class = 'col-md-4 col-md-offset-4 ’ 元素向右侧偏移了4个列（column）的宽度
在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="thumbnail" style="height: 400px"></div>
    </div>
    设置第二个盒子向右偏移6列
    <div class="col-lg-3 col-lg-offset-6">
      <div class="thumbnail" style="height: 400px"></div>
    </div>
  </div>

七、全局的CSS样式

lead类名class = lead——突出显示
对齐——通过类名控制

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
两端对齐，应用于英文
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写——通过类名控制

小写
<p class="text-lowercase">Lowercased text.</p>
大写
<p class="text-uppercase">Uppercased text.</p>
首字母大写
<p class="text-capitalize">Capitalized text.</p>

缩略语abbr的title属性
当鼠标悬停在缩写和缩写词上时就会显示完整内容，Bootstrap 实现了对 HTML 的元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上
地址
small标签或者small类——小号文本
对于不需要强调的inline或block类型的文本，使用 < small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%。
< small>small标签</ small>
或者small类
< span class=“small”>small类< /span>
mark标签——文本填色
< mark>文本内容</ mark>
del标签——被删除的文本
s标签——无用的文本
ins标签——额外插入的文本
u标签——下划线

八、表格样式

通过为表格的table标签添加类名，可以生效Bootstrap提前设置好的样式

①.table基本表格

在这里插入图片描述

②.table-striped条纹状表格

需要加上基本表格的table类名
在这里插入图片描述

③.table-bordered带边框的表格

在这里插入图片描述

④.table-hover鼠标悬停

每一行对鼠标悬停状态作出响应

⑤.table-condensed紧缩表格

让表格更加紧凑，单元格中的内补（padding）均会减半

⑥状态类（重要）

通过这些状态类可以为行或单元格设置颜色

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

在这里插入图片描述

⑦响应式表格（给父元素设置table-responsive类）

将任何 table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失
在这里插入图片描述

九、表单样式

①基本表单.form-control和.form-group

input、textarea、select等表单控件加上form-control类名
将他们包裹在.form-group类的元素中可以获得样式
在这里插入图片描述

<form>
  1. 包裹在form-group类中
  <div class="form-group">
    <label for="username">用户名</label>
    2. 表单控件加上form-control
    <input class="form-control" type="text" name="" id="username" placeholder="请输入用户名">
  </div>
  <div class="form-group">
    <label for="password">密码</label>
    <input class="form-control" type="password" name="" id="password" placeholder="请输入密码">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit</button>
  </div>
</form>

②字体图标组件

在这里插入图片描述
用单独的空span标签添加图标的类名即可显示
< span class=“glyphicon glyphicon-music”></ span>

十、按钮

①可作为按钮使用的标签或元素

为 < a>、< button> 或 < input> 元素添加按钮类（btn）即可使用 Bootstrap 提供的样式
在这里插入图片描述

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

注意：

虽然按钮类可以应用到 < a> 和 < button> 元素上，但是，导航和导航条组件只支持 < button> 元素
如果< a>标签只作为按钮使用，并不跳转或其他功能（下拉菜单），需要添加role="button"属性

②Bootstrap预定义样式

在这里插入图片描述
记住类名：

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-info">（一般信息）Info</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

<button type="button" class="btn btn-link">（链接）Link</button>

③尺寸

使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
在这里插入图片描述

④激活状态与禁用状态

激活状态：active类
当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）

<button type="button" class="btn btn-default btn-lg active">Button</button>

禁用状态：disabled

button元素添加disabled属性，鼠标无法点击
<button class="btn btn-lg btn-primary" disabled="disabled">Button</button>
a元素添加disabled类
<a href="#" class="btn btn-lg btn-primary disabled">A</a>

⑤关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失
在这里插入图片描述

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

⑥三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的
在这里插入图片描述

<span class="caret"></span>

按钮下拉菜单

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

十一、导航条

在这里插入图片描述

//1. navbar类名
<nav class="navbar navbar-default">
  <div class="container-fluid">
    //2. 实现手机屏幕缩小时，右边出现的三条杠下拉菜单，一个span代表一个杠
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    //3. 导航条左侧相关按钮
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      //4. sr-only会隐藏
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        //5. 下拉菜单（需要引入jQuery和bootstrap的js文件）
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            //7. 下拉菜单的分割线
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      //6. 搜索框（left改为right可以向右偏靠）
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

十二、面板和下拉菜单

带标题的面版

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

下拉菜单

//class改为dropup可以改为上拉菜单
<div class="dropdown">
  //按钮
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  //下拉菜单
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

十三、分页、路径导航、标签、徽章

分页

<nav aria-label="Page navigation">
  //给ul加类.pagination-lg和.pagination-sm类改变按钮大小
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
      	//左双箭头
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    //激活状态显示蓝色
    <li class='active'><a href="#">1</a></li>
    //禁用状态无法点击
    <li class='disabled'><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

路径导航
在一个带有层次的导航结构中标明当前页面的位置

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

标签

<h3>默认标签 <span class="label label-default">New</span></h3>
<h3>默认标签 <span class="label label-primary">New</span></h3>
<h3>默认标签 <span class="label label-success">New</span></h3>
<h3>默认标签 <span class="label label-danger">New</span></h3>
<h3>默认标签 <span class="label label-warning">New</span></h3>
<h3>默认标签 <span class="label label-info">New</span></h3>

徽章（未读消息）

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
	//重点是span标签类badge
  Messages <span class="badge">4</span>
</button>

十四、警告框和进度条

警告框

//alert-warning还可以修改为danger，info等
<div class="alert alert-warning alert-dismissible" role="alert">
  //右边的关闭按钮，data-dismiss="alert"代表取出alert框
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

进度条

基本进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
 	//sr-only隐藏
    <span class="sr-only">60% Complete</span>
  </div>
</div>

带有提示标签的进度条

将设置了 .sr-only 类的 < span> 标签从进度条组件中移除类，从而让当前进度显示出来

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

根据情境变化效果
为progress-bar添加progress-bar-success（info、danger）等类
条纹效果
为progress-bar添加progress-bar-striped类名

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>

动画效果
为 .progress-bar-striped 添加 .active 类

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

十五、Bootstrap的插件

①模态框

在这里插入图片描述

  <!-- 打开模态框按钮 -->
  //data-target="#myModal"指向的是下面的模态框主体
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>

  <!-- 模态框主体 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <!-- 右上角关闭按钮 -->
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
        </div>
        <div class="modal-body">
          模态框内容区
        </div>
        <!-- 关闭和保存按钮 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

手动打开隐藏模态框

通过控制按钮的click事件打开或隐藏模态框主体
选择器选中按钮的ID，调用modal方法
$('#myModal').modal('show')
$('#myModal').modal('hide')

②标签页

在这里插入图片描述

<div>

  <!-- 标签选项卡 -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">标签内容1</div>
    <div role="tabpanel" class="tab-pane" id="profile">标签内容2</div>
    <div role="tabpanel" class="tab-pane" id="messages">标签内容3</div>
    <div role="tabpanel" class="tab-pane" id="settings">标签内容4</div>
  </div>

</div>

③侧边手风琴效果（Collapse）

在这里插入图片描述

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

④轮播图效果（Carousel）

在这里插入图片描述

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Kerwin_YF

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Jquery开发&BootStrap

jQuery一、jQuery介绍1. 什么是jQuery（类似于python中的模块）jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。另外它只是封装了js的dom的操作和ajax，其它的...
复制链接

扫一扫