jQuery框架 ＞＞＞ BootStrap

• 作用: 和JavaScript一样给页面添加动态效果,其实就是对部分原生JavaScript语言的封装,可以让程序员写的更少但实现的更多

js:     var d = document.getElementById("id")
jQuery:   $("#id")

• 引入方式: 由于jQuery就是通过JavaScript语言所写,框架本身就是一个js文件,所以和引入普通的js文件一样通过script标签的src属性引入到HTML页面即可.
• 过id获取元素对象,此时获取到的是jQuery对象 和js对象不一样 $("#id")

js对象和jq对象互相转换

• 基础选择器 写法和css一样

$("div")    标签名选择器
$("#id")   id选择器
$(".class")     类选择器
$("div,#id,.class")  分组选择器
$("*")  任意元素选择器

• 层级选择器

$("div span") 匹配div里面的所有span包括子孙后代

$("div>span") 匹配div里面的span子元素  

$("div+span") 匹配div的弟弟span  

$("div~span") 匹配div的弟弟们span

	 层级相关的方法:
		
$("#abc").next("span")  匹配id为abc元素的弟弟span元素
$("#abc").nextAll()  匹配id为abc元素的弟弟们元素
$("#abc").prev()  匹配id为abc元素的哥哥元素
$("#abc").prevAll()  匹配id为abc元素的哥哥们元素
$("#abc").siblings() 匹配id为abc元素的所有兄弟元素
$("#abc").parent() 匹配id为abc元素的父元素
$("#abc").children() 匹配id为abc元素的所有子元素们
	

• 过滤选择器

$("div:first")  匹配所有div中的第一个
$("div:last") 匹配所有div中的最后一个
$("div:eq(i)") 匹配所有div中下标为i的元素
$("div:lt(i)")  匹配所有div中下标小于i的元素
$("div:gt(i)") 匹配所有div中下标大于i的元素
$("div:not(.abc)") 匹配所有div中class不等于abc的元素
$("div:even") 匹配所有div中下标为偶数的元素
$("div:odd") 匹配所有div中下标为奇数的元素

• 内容选择器

$("div:has(span)")  匹配包含span子元素的div
$("div:empty") 匹配空的div
$("div:parent") 匹配非空的div
$("div:contains('xxx')")  匹配包含xxx文本的div

• 可见选择器

$("div:hidden") 匹配所有隐藏的div

$("div:visible") 匹配所有显示的div

		隐藏显示相关的方法

$("#abc").show()   让id为abc的元素 显示
$("#abc").hide()    让id为abc的元素 隐藏
$("#abc").toggle()   让id为abc的元素显示和隐藏切换 

• 属性选择器

$("div[id]")  匹配包含id属性的div
$("div[属性名='xxx']") 匹配xxx属性值为xxx的div
$("div[属性名!='xxx']") 匹配xxx属性值不等于xxx的div

• 子元素选择器

$("div:first-child")  匹配是div并且是子元素 并且是第一个子元素
$("div:last-child")  匹配是div并且是子元素 并且是最后一个子元素
$("div:nth-child(n)") 匹配是div并且是子元素 并且是第n个子元素 n从1开始

• 表单选择器

$(":input") 匹配表单中所有的控件 
$(":password") 匹配所有密码框
$(":radio") 匹配所有单选框
$(":checkbox")  匹配所有多选框
$(":checked")  匹配所有选中的单选多选和下拉选 
$("input:checked") 匹配所有选中的单选和多选  
$(":selected") 匹配所有选中的下拉选

修改元素相关内容

• 创建和添加元素对象
  如何创建新元素

var d = $("<div id='abc'>xxx</div>");

如何把创建的元素添加到页面中

元素.append(新元素);     把某个新元素添加到元素的最后面

元素.prepend(新元素);   把某个新元素添加到元素的最前面

兄弟元素.before(新元素);  把某个元素添加到该元素的前面

兄弟元素.after(新元素); 把某个元素添加到该元素的后面

删除元素

元素.remove()

• 获取或修改元素的文本内容

元素.text("xxx") ;  修改文本内容           等效 innerText="xxx";
元素.text();  获取文本内容                     等效innerText片

• 获取或修改元素的html内容

元素.html("
		xxx
");  修改元素的html内容     等效 innerHTML="....";
元素.html()   获取          等效innerHTML

• 获取元素或修改元素的css样式

元素.css("样式名","值");     修改元素的样式
元素.css("样式名");   获取样式
元素.css({"样式1名":"值","样式2名":"值"});  样式批量赋值

• 获取或修改元素的属性

元素.attr("属性名","值");  修改
元素.attr("属性名");     获取

变量作用域相关

• var 关键字声明变量时 作用域的范围是和java中变量的作用域不一样, 如果声明在方法外面等效java中的全局变量,如果声明在事件方法中作用域为方法的整个执行过程中
• let关键字是在ES6标准中新增的声明变量的关键字, 如果需要声明局部变量使用let关键字
• 全局变量用var 局部变量用let

鼠标移入移出事件合并 hover

//给所有div添加移入移出事件
$("div").hover(function(){
    $(this).css("color","red");
},function(){
    $(this).css("color","green");
});

BootStrap

• 此框架是目前比较流行的前端框架,基于HTML/css/JavaScript/jQuery实现, 由Twitter公司研发, 框架作用: 提高前端页面的开发效率
• 学习Bootstrap主要学习的就是如何去文档中找到对应的内容,然后复制粘贴到自己页面中
• 工作原理: boostrap框架提供了n种常见的样式(提前写好了市面上常见的样式代码), 在开发页面的时候如果需要使用框架中所提供的效果只需要给元素添加响应的class,样式会自动添加到元素上,文档中提供了各种样式对应的class值

响应式布局

• 响应式布局就是根据不同的设备显示不同的样式
• 媒体查询: 这是Bootstrap中实现响应式布局的实现方式