本文主要介绍了jQuery的基本概念，如选择器、元素操作、样式和属性操作、文本处理、动画效果以及事件处理，并详细讲解了jQuery节点操作。此外，还探讨了Bootstrap框架，包括其简介、栅格系统等，为前端开发提供快速布局方案。
一、jquery简介
jquery是一个免费的、开源的js库，也是目前使用最广泛的js库
jquery极大的方便完成web前端的相关操作，比如节点操作，元素操作，事件绑定，ajax操作，还可以解决大多数浏览器兼容性的问题
二、jQuery选择器
jquery选择器可以获取html元素
为了学习选择器，先了解一个知识点:jquery通过css方法来修改样式
| 描述 | 案例 |
|---|---|
| id选择器 | $("#div").css(“background”,“red”); |
| 类选择器 | $(".div").css(“background”,“red”); |
| 标签选择器 | $(“div”).css(“background”,“red”); |
| 属性选择器 | $([name=nice”]").css(“background”,“red”); |
| 后代选择器 | $("#div p").css(“background”,“red”); |
| 子选择器 | $("#div>p").css(“background”,“red”); |
| 并列选择器 | $("#div,.div").css(“background”,“red”); |
| first last | $(“div:first”).css(“background”,“red”); |
| eq 通过索引获取元素 | $(“div:eq(2)”).css(“background”,“red”); |
代码实现：
<script>
$(function(){
//id选择器
$("#div1").css("background","red")
//class选择器
$(".div2").css("background","blue")
//tag标签器
// $("p").css("fontSize","50px")
//属性选择器
// $("[alt]").css("width","200px")
$("[alt='lian1.png']").css("width","200px")
//后代选择器
// $("#div2 span").css("fontSize","50px")
$("#div2 > span").css("fontSize","50px")
//first,last,eq索引
// $("#div3 span:first").css("fontSize","50px")
// $("#div3 span:last").css("fontSize","50px")
$("#div3 span:eq(1)").css("fontSize","50px")
})
</script>
三、jquery元素操作
通过jquery可以操作控制元素的样式、文本、属性
| 描述 | 案例 |
|---|---|
| 获取子元素 | var childen = $("#div").children(); |
| 获取上一个兄弟元素 | var prev = $("#div").prev(); |
| 获取下一个兄弟元素 | var next = $("#div").next(); |
| 获取同层除了自己所有元素 | var siblings = $("#div").siblings(); |
| 获取父元素 | var parent = $("#inner").parent(); |
| 获取先祖元素 | var parents = $("#inner").parents(); |
代码实现：
<script>
$(function(){
$("#myspan").prev().css("fontSize","50px")
$("#myspan").prev().children().css("fontSize","50px")
// 注意连写，别找错对象了
$("#myspan").prev().children("span").css("fontSize","50px")
$("#myspan").siblings().css("fontSize","50px")
$("#myspan").siblings("a").css("fontSize","50px")
console.log($("#myspan").parent())
$("#myspan").parent().children("p:eq(2)").css("fontSize","50px")
console.log($("#myspan").parents())
$("#myspan").parents("body").css("backgroundColor","gray")
})
</script>
四、jquery样式操作
1、css()取出或设置css样式
css方法如果只指出属性，没有给值，可以获取对应属性的值
css方法如果给出属性和值，就修改样式
css还支持修改多个样式
2、addClass,removeClass,toggleClass通过添加和减去class属性值来修改样式
代码实现：
<script>
$(function(){
//获取
console.log($("#myspan").css("fontSize"))
//设置单个属性
$("#myspan").css("fontSize","60px")
//设置多个属性
$("#myspan").css({"fontSize":"60px","backgroundColor":"red","color":"white"})
})
</script>
<script>
$(function(){
//一般jquery对象调用方法后，还是当前对象。但是关系除外比如parent
//增加
$("#myspan").addClass("myclass1").addClass("myclass2")
$("#myspan").removeClass("myclass2")
//有就去掉，没有就加上
$("#myspan").toggleClass("myclass1")
})
</script>
五、jquery属性操作
1、attr()取出或设置某个属性的值
2、removeattr删除属性
代码实现：
<script>
console.log($("#myimg"))
//属性的获取
console.log($("#myimg").attr("src"))
//属性的设置
$("#myimg").attr("src","./img/lian2.png")
$("#myimg").attr({"src":"./img/lian2.png","title":"lian2.png"})
</script>
六、jquery文本操作
1、html()取出或设置html内容
2、text()取出或设置text内容
代码实现：
<script>
//html
console.log($("#mydiv").html())
$("#mydiv").html("<h1>哈喽</h1>")
//text
console.log($("#mydiv").text())
$("#mydiv").text("哈喽")
</script>
七、相关尺寸
1、取出或设置元素的高度和宽度，width()
，height()
2、取出或设置元素的相对于文档的偏移坐标量，offset()
代码实现：
<script>
$(function(){
//获取
console.log($(".mydiv").width())
console.log($(".mydiv").height())
//获取 width+padding+border
console.log($(".mydiv").outerWidth())
console.log($(".mydiv").outerHeight())
//设置
$(".mydiv").width("300px")
$(".mydiv").height("300px")
})
</script>
<script>
$(function(){
//偏移量
console.log($(".mydiv").offset())
console.log($(".mydiv").offset().top)
console.log($(".mydiv").offset().left)
})
</script>
八、动画效果
1、hide(),show(),toggle()设置显示和隐藏
jquery动画函数普通可以接收一个fast，slow，normal，表示动画的速度快慢的描述。当然也可以设置时间单位是毫秒
2、fadeIn(),fadeOut(),fadeToggle()设置元素淡入淡出
3、slideDown()，slideUp()，slideToggle以滑动的方式显示和隐藏元素
代码实现：
<script>
$(function(){
$("#hide").click(function(){
// $("#mydiv").hide()
$("#mydiv").hide(3000)
})
$("#show").click(function(){
// $("#mydiv").show("fast")
$("#mydiv").show("slow")
})
$("#toggle").click(function(){
$("#mydiv").toggle(1000)
})
})
</script>
<script>
$(function(){
$("#hide").click(function(){
$("#mydiv").fadeOut(3000)
})
$("#show").click(function(){
$("#mydiv").fadeIn("slow")
})
$("#toggle").click(function(){
$("#mydiv").fadeToggle(1000)
})
})
</script>
<script>
$(function(){
$("#hide").click(function(){
$("#mydiv").slideUp(3000)
})
$("#show").click(function(){
$("#mydiv").slideDown("slow")
})
$("#toggle").click(function(){
$("#mydiv").slideToggle(1000)
})
})
</script>
九、自定义动画
1、animate()方法设置自定义动画
语法：$(“选择器”).animate(styles,speed,easing,callback)
| 参数 | 描述 |
|---|---|
| styles | 必需，规定产生动画的css样式和值 |
| speed | 可选，规定动画的速度，默认是nomal，如果是数字，单位是毫秒 |
| easing | 可选，规定不同的动画中设置速度的easing函数，内置的函数有:swing和linear。 |
| callback | 可选，animate函数执行完之后，要执行的函数 |
2、stop()停止动画
3、delay()延迟动画
代码实现：
<script>
$(function(){
$("#btn1").click(function(){
// $("#mydiv").animate({"width":"300px"},1000)
$("#mydiv").animate({"width":"+=100px"},1000)
// $("#mydiv").animate({"width":"+=100px","height":"+=20px"},1000,"linear",function(){
// alert("动画完成啦")
// })
});
$("#btn2").click(function(){
//stop(true)停止一切动画
$("#mydiv").stop(true).animate({"width":"100px"},1000)
})
$("#btn3").click(function(){
$("#mydiv").delay(2000).animate({"width":"500px"},1000)
})
})
</script>
十、jQuery关于事件
jquery事件与js类似，但是有个大的变动
1、事件的名称由on事件变成了事件名称
2、事件的调用由=编程了()
3、jquery所有事件和js事件一样需要函数
jquery常用的事件
表单与键盘事件
| 事件 | 描述 |
|---|---|
| blur | 表单失去焦点 |
| focus | 表单获取焦点 |
| submit | 表单提交 |
| change | 表单发生修改 |
| keydown | 键盘按下 |
| keyup | 键盘弹起 |
鼠标常用事件
| 事件 | 描述 |
|---|---|
| click | 鼠标单击事件 |
| mouseover | 鼠标移动到对象上面 |
| mousemove | 鼠标移动 |
| mouseout | 鼠标移除 |
| mousedown | 鼠标按下 |
| mouseup | 鼠标弹起 |
代码实现：
<script>
$("#btn").click(function(){
alert("哈喽")
})
$("li").click(function(){
//this标签当前对象，this是js对象，支持js的方法，不支持jquey的方法
//js对象--转-->jquery对象：$(js对象)
//jquery对象--转-->js对象：jquery对象[索引]
alert($(this).text())
console.log($("ol")[0])
console.log($("ol")[0].getAttribute("type"))
})
</script>
十一、jquery节点操作
1、创建节点
2、插入节点
append()在现在元素的内部，从后面插入元素
prepend在现在元素的内部，从前面插入元素
after()在现有元素的外部，从后面插入元素，作为兄弟节点
before()在现有元素的外部，从前面插入元素，作为兄弟节点
3、删除节点
$(element).remove()删除当前元素
$(element).empy()清空
4、克隆节点
$(element).clone(true)
代码实现：
<script>
//创建节点对象
var $div = $("<div>我不瞌睡</div>")
console.log($div)
var $p = $("<p>我要好好学习</p>")
var $p2 = $("<p>我要好好学习2</p>")
var $p3 = $("<p>我要好好学习3</p>")
var $p4 = $("<p>我要好好学习4</p>")
console.log($p)
//插入节点，作为子节点
$("#content").append($p)
$("#content").prepend($p2)
//插入节点，作为兄弟节点
$("#content").after($p3)
$("#content").before($p4)
//删除当前标签
$("ul").remove()
//清空当前标签
$("ul").empty()
//克隆
var $li = $("ul li:eq(2)").clone(true)
//追加
$("ul").append($li)
</script>
十二、boostrap框架
1、boostrap简介
boostrap是一个成熟的web前端框架，涵盖了页面开发的大部分CSS布局，js的特效，是前端快速开发的必备框架
boostrap官网https://www.bootcss.com/
在常规中，先编写html，然后编写样式，接着编写html的功能
bootstrap与这种开发不同，先定义好样式和特效，如果需要直接class和其他属性调用，在学习bootstrap框架的时候，我们需要掌握的常见的bootstrap类名和其他属性
2、栅格系统
栅格系统是bootstrap推出的一种快速的页面布局方案
栅格系统将页面宽度分为12份，开发者只需要设置每一份是多少间距就可以了，栅格系统可以快速的进行布局
1、栅格系统必须在container或者container-fluid下，如果不在这两个下面，不生效，container是固定宽度，如果浏览器比他宽就居中显示，container-fluid是100%宽度
2、删除系统一行划分为12列，如果所有元素没有占满12份也可以布局，如果超过，另起一行
3、栅格系统可以使用row进行垂直划分
4、bootstrap可以适用大部分的终端（手机端，平板，电脑，投影仪）的布局
扫一扫
1372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
