jQuery
JavaScript库
为了简化JavaScript开发，第三方厂商开发了JavaScript库
常用的库：jQuery Vue.js Angular React
简介
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
使用
在官网jquery.com下载
方式1
放入同一文件夹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
</body>
</html>
pycharm或者IDEA默认添加
方式2
直接引入jquery提供的CDN服务
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> 没有压缩的
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 压缩的
"""你的计算机必须要有网络"""
<!DOCTYPE html > <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实验室</title> <style> .myclass { font-style: italic; color: darkblue; } /* 高亮css类 */ .highlight { color: red; font-size: 30px; background: lightblue; } </style> </head> <body> <div class="section"> <h2>jQuery选择器实验室</h2> <input style="height: 24px" id="txtSelector" /> <button id="btnSelect" style="height: 30px">选择</button> <hr /> <div> <p id="welcome">欢迎来到选择器实验室</p> <ul> <li>搜索引擎：<a href="http://www.baidu.com">百度</a> <span> <a style="color: darkgreen" href="http://www.so.com">360</a> </span> </li> <li>电子邮箱：<a href="http://mail.163.com">网易邮箱</a> <span> <a style="color: darkgreen" href="http://mail.qq.com">QQ邮箱</a> </span> </li> <li>中国名校：<a href="http://www.tsinghua.edu.cn">清华大学</a> <span> <a style="color: darkgreen" href="https://www.pku.edu.cn/">北京大学</a> </span> </li> </ul> <span class="myclass ">我是拥有myclass类的span标签</span> <p class="myclass">我是拥有myclass的p标签</p> <form id="info" action="#" method="get"> <div> 用户名：<input type="text" name="uname" value="admin" /> 密码：<input type="password" name="upsd" value="123456" /> </div> <div> 婚姻状况： <select id="marital_status"> <option value="1">未婚</option> <option value="2">已婚</option> <option value="3">离异</option> <option value="4">丧偶</option> </select> </div> <div class="left clear-left"> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </div> </form> </div> </div> </body> </html>
<script type="text/javascript"> document.getElementById("btnSelect").onclick=function () { $("a").addClass("highlight"); } </script>
基本选择器
<script type="text/javascript"> /* id选择器使用"#id值"进行选择 css选择器使用".css类名"进行选择 $(".myclass").addClass("highlight"); */ document.getElementById("btnSelect").onclick = function(){ var selector = document.getElementById("txtSelector").value; //jquery的选择器方法 //选择器 $("*").removeClass("highlight"); $(selector).addClass("highlight"); } </script>
基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()
基本选择器(同css) # id 选择器 $("#id") # 标签选择器 $("div") # class选择器 $(".className") # 配合使用 $("div.c1") # 所有元素选择器 $("*") # 组合选择器 $("#id, .className, tagName")
层级选择器(同css)
x 和 y 可以为任意选择器 #后代选择器 $("x y") # x的所有后代y(子子孙孙)
#子选择器 $("x > y") # x的所有儿子y
#毗邻选择器 $("x + y") # 找到所有紧挨在x后面的y
#兄弟选择器 $("x - y") # x之后所有的兄弟y
属性选择器
#精确匹配
$('a[username="jason"]')
$("input[type='text']") 只有写了属性的才有效，默认的无效
#匹配开头
$('a[herf="http://www."]')
#匹配结尾
$('a[href="edn.cn"]')
#匹配包含
$('a[href="edu."]')
基本筛选器 :first # 第一个 :last # 最后一个 :eq(index) # 索引等于index的那个元素 :even # 匹配所有索引值为偶数的元素，从 0 开始计数 :odd # 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index) # 匹配所有大于给定索引值的元素 :lt(index) # 匹配所有小于给定索引值的元素 :not(元素选择器) # 移除所有满足not条件的标签 :has(元素选择器) # 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) 示例: $("div:has(h1)") # 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来 $("div:has(.c1)") # 找到所有后代中有c1样式类（类属性class='c1'）的div标签 $("li:not(.c1)") # 找到所有不包含c1样式类的li标签 $("li:not(:has(a))") # 找到所有后代中不含a标签的li标签
表单选择器
$("input：text")
操作元素属性
attr(name|properties|key) 获取或设置元素属性，一个参数获取 两个参数修改
remove(name) 移除元素属性
$("a[href*='163']").attr("href" , "http://www.163.com");
多个属性.attr 获取时会第一个属性 设置时会设置所有的
$("a").removeAttr("href");
操作CSS属性
获取或设置元素属性，一个参数获取 两个参数修改
$("a").css("color" , "red");
$("a").css({"color" : "red" , "font-weight" : "bold" , "font-style" : "italic"}); 多个属性用JSON对象
添加删除属性
$("li").addClass("highlight");单个
$("li").addClass("highlight myclass");多个
$("p").removeClass("myclass");
设置元素内容
val()获取或设置输入项的值
text()获取或设置元素的纯文本
html()获取或设置元素内部的HTML
$("input[name='uname']").val("administrator");
var v = $("input[name='uname']").val();
alert(v);
//text与html方法最大的区别在于对于文本中的html标签是否进行转义
//$("span.myclass").text("<b>锄禾日当午，汗滴禾下土</b>");
$("span.myclass").html("<b>锄禾日当午，汗滴禾下土</b>");
var vspan = $("span.myclass").text();
alert(vspan);
jQuery事件处理
on("clik",function) 为选中的页面元素绑定单击事件
click(function)是绑定事件的简写形式
$("p.myclass").on("click",function(){
$(this).css("background-color","yellow"); //this是当前事件产生的对象
})；
$("span.myclass").click(function(){
$(this).css("background-color","lightgreen");
});
$("input[name="uname"]").keypress(function(event){
console.log(evevt); event包含了按键细节 key：" " keyCode：32
if(event.ketCode==32){ 判断是否空格按下
$(this).css("background-color","red");
}
});
// jQuery对象如何变成标签对象
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
$(document.getElementById('d1'))
w.fn.init [div#d1]
组合选择器/分组与嵌套
$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
$('#d1,.c1,p') # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
$('div span') # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span') # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span') # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span') # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
基本筛选器
$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first') # 大儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:last') # 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') # 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:even') # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:odd') # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:gt(2)') # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:lt(2)') # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:not("#d1")') # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') # 选取出包含一个或多个标签在内的标签 找u
w.fn.init [div, prevObject: w.fn.init(1)]
属性选择器
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单筛选器
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性:
：enabled
:disabled
:checked
:selected
特殊情况
$(':checked') # 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected') # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked') # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
筛选器方法
$('#d1').next() # 同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextUntil('.c1') # 不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('.c1').prev() # 上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('#d3').parent() # 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() # 儿子
$('#d2').siblings() # 同级别上下所有
$('div p')
# 等价
$('div').find('p') # find从某个区域内筛选出想要的标签
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
w.fn.init [span, prevObject: w.fn.init(3)]
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]
操作标签
# 操作类
| js版本 | jQuery版本 |
| classList.add() | addClass() |
| classList.remove() | removeClass() |
| classList.contains() | hasClass() |
| classList.toggle() | toggleclass() |
css操作
<p>111</p>
<p>222</p>
"""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
# 位置操作
offset() # 相对于浏览器窗口
position() # 相对于父标签
scrollTop() # 需要了解
scrollLeft()#当前滚动条到顶部距离
$(window).scrollTop() 0 $(window).scrollTop() 969 $(window).scrollTop() # 括号内不加参数就是获取 1733
$(window).scrollTop(0) # 加了参数就是设置 n.fn.init [Window] $(window).scrollTop(500) n.fn.init [Window] scrollLeft()
尺寸
$('p').height() # 文本
20
$('p').width()
1670
$('p').innerHeight() # 文本+padding
26
$('p').innerWidth()
1674
$('p').outerHeight() # 文本+padding+border
26
$('p').outerWidth()
1674
文本操作
括号内不加参数就是获取加了就是设置
| js | jQuery |
| innerText | text() |
| innerHTML | html() |
$('div').text()
"
有些话听听就过去了，不要在意，都是成年人!
"
$('div').html()
"
<p>
有些话听听就过去了，不要在意，都是成年人!
</p>
"
$('div').text('你们都是我的大宝贝')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('你个臭妹妹')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').text('<h1>你们都是我的大宝贝</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('<h1>你个臭妹妹</h1>')
w.fn.init [div, prevObject: w.fn.init(1)]
获取值操作
| js | jQuery |
| .value | .val() |
$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快乐') # 括号内不加参数就是获取加了就是设置
w.fn.init [input#d1]
$('#d2').val()
"C:\fakepath\01_测试路由.png"
$('#d2')[0].files[0] # 牢记两个对象之间的转换
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
属性操作
| js | jQuery |
| setAttribute() | attr(name,value) |
| getAttribute() | attr(name) |
| removeAttribute() | removeAttr(name) |
在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象
"""
let $pEle = $('p')
undefined
$pEle.attr('id')
"d1"
$pEle.attr('class')
undefined
$pEle.attr('class','c1')
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('password')
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
"""
$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked') # 无效
w.fn.init [input#d3]
$('#d2').prop('checked')
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]
文档处理
| js | jQuery |
| createElement('p') | $('<p>') |
| appendChild() | append() |
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
$pEle.appendTo($('#d1'))
$('#d1').prepend($pEle) # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
$('#d2').after($pEle) # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))
$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))
$('#d1').remove() # 将标签从DOM树中删除
w.fn.init [div#d1]
$('#d1').empty() # 清空标签内部所有的内容
w.fn.init [div#d1]
事件
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
* 克隆事件
<button id="d1">屠龙宝刀，点击就送</button>
<script>
$('#d1').on('click',function () {
// console.log(this) // this指代是当前被操作的标签对象
// $(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件
$(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件
})
</script>
自定义模态框
模态框内部本质就是给标签移除或者添加上hide属性
* 左侧菜单
<script>
$('.title').click(function () {
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内部的hide移除
$(this).children().removeClass('hide')
})
</script>
<!--尝试用一行代码搞定上面的操作-->
* 返回顶部
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>
* 自定义登陆校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
let $userName = $('#username')
let $passWord = $('#password')
$('#d1').click(function () {
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if (!userName){
$userName.next().text("用户名不能为空")
}
if (!passWord){
$passWord.next().text('密码不能为空')
}
})
$('input').focus(function () {
$(this).next().text('')
})
</script>
* input实时监控
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
* hover事件
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
* 键盘按键按下事件.
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
阻止后续事件执行
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行 方式1
// return false
// 阻止标签后续事件的执行 方式2
// e.preventDefault()
})
</script>
阻止事件冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
事件委托
<button>是兄弟，就来砍我!!!</button>
<script>
// 给页面上所有的button标签绑定点击事件
// $('button').click(function () { // 无法影响到动态创建的标签
// alert(123)
// })
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]
补充
# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
# data()
能够让标签帮我们存储数据 并且用户肉眼看不见
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
Ajax
Asynchronous JavaScript And XML（异步的JavaScript和XML）
Ajax可以在不刷新页面的前提下，进行页面局部更新
Ajax的使用流程
1.创建XmlHttpReqeust对象 用在与后台服务器交换数据，是Ajax核心
var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
2.发送Ajax请求
//创建请求 xmlhttp.open("GET","http://localhost/test?name=admin",true);//请求方法，映射地址，异步同步
//发送到服务器 xmlhttp.send();
3.处理服务器响应
xmlhttp.onreadystatechange()事件用于监听AJAX的执行事件
xmlhttp.readyState 属性说明XMLHttpRrquest当前状态
readyState值 |
说明 |
| 0 | 请求未初始化 |
| 1 | 服务器已被建立 |
| 2 | 请求已被接收 |
| 3 | 请求正在处理 |
| 4 | 响应文本已被接收 |
xmlhttp.status 属性服务器响应状态码200成功 404未找到
xmlhttp.onreadystatechange=function() { //响应已被接收且服务器处理成功时才执行 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //获取响应体的文本 var responseText = xmlhttp.responseText; //对服务器结果进行处理 ... } }
例子：
ContentServlet 类
package com.imooc.ajax; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/context") public class ContentServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().println("<b>I'am servlet</b>"); } }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="加载" id="btnload"> <div id="divContent"></div> <script type="text/javascript"> document.getElementById("btnload").onclick=function () { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } console.log(xmlhttp); xmlhttp.open("GET","http://localhost:8080/Myservlet/context",true);//请求方法，映射地址，异步同步 // xmlhttp.open("GET","/Myservlet/context",true); xmlhttp.send(); xmlhttp.onreadystatechange=function () { if(xmlhttp.readyState==4&&xmlhttp.status==200){ var t=xmlhttp.responseText; alert(t); document.getElementById("divContent").innerHTML=t; } } }; </script> </body> </html>
实现新闻列表
news类
package com.imooc.ajax; public class News { private String title; private String date; private String source; private String content; public News() { } public News(String title, String date, String source, String content) { super(); this.title = title; this.date = date; this.source = source; this.content = content; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getDate() { return date; } public void setDate(String date) { this.date = date; } public String getSource() { return source; } public void setSource(String source) { this.source = source; } public String getContent() { return content; } public void setContent(String content) { this.content = content; } }
newslistservlet类
package com.imooc.ajax; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; @WebServlet("/news_list") public class NewsListServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String type = request.getParameter("t"); List list = new ArrayList(); if(type != null && type.equals("pypl")) { list.add(new News("PYPL:2018年5月份全球编程语言排行榜" , "2018-5-1" , "PYPL" , "...")); list.add(new News("PYPL:2018年6月份全球编程语言排行榜" , "2018-6-1" , "PYPL" , "...")); list.add(new News("PYPL:2018年7月份全球编程语言排行榜" , "2018-7-1" , "PYPL" , "...")); list.add(new News("PYPL:2018年8月份全球编程语言排行榜" , "2018-8-1" , "PYPL" , "...")); }else if(type == null || type.equals("tiobe")) { list.add(new News("TIOBE:2018年5月份全球编程语言排行榜" , "2018-5-1" , "TIOBE" , "...")); list.add(new News("TIOBE:2018年6月份全球编程语言排行榜" , "2018-6-1" , "TIOBE" , "...")); list.add(new News("TIOBE:2018年7月份全球编程语言排行榜" , "2018-7-1" , "TIOBE" , "...")); list.add(new News("TIOBE:2018年8月份全球编程语言排行榜" , "2018-8-1" , "TIOBE" , "...")); } String json = JSON.toJSONString(list); System.out.println(json); response.setContentType("text/html;charset=UTF-8"); response.getWriter().println(json); } }
news.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="container"> </div> <script type="text/javascript"> //1. 创建XmlHttpRequest var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); }else{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. 发送Ajax请求 //true 代表异步执行 false代表同步执行 xmlhttp.open("GET" , "/ajax/news_list" , true); xmlhttp.send(); console.log("请求发送完成"); /* 同步处理代码 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var text = xmlhttp.responseText; console.log(text); var json = JSON.parse(text); console.log(json); var html = ""; for(var i = 0 ; i < json.length ; i++){ var news = json[i]; html = html + "<h1>" + news.title + "</h1>"; html = html + "<h2>" + news.date + " " + news.source +"</h2>" html = html + "<hr/>" } document.getElementById("container").innerHTML = html; }*/ //3. 处理服务器响应 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var text = xmlhttp.responseText; console.log(text); var json = JSON.parse(text); console.log(json); var html = ""; for(var i = 0 ; i < json.length ; i++){ var news = json[i]; html = html + "<h1>" + news.title + "</h1>"; html = html + "<h2>" + news.date + " " + news.source +"</h2>" html = html + "<hr/>" } document.getElementById("container").innerHTML = html; } } </script> </body> </html>
jQuery对Ajax的支持
jQuery对AJAX进行封装，提供了$.ajax()方法
语法:$.ajax(options)
| 常用设置项 | 说明 |
| url | 发送请求地址 |
| type | 请求参数get post |
| data | 向服务器传递的参数 |
| dadaType | 服务器响应的数据类型text|json|xml|jsonp|script |
| succcess | 接收响应时处理的函数 |
| error | 请求失败时的处理函数 |
jsonp跨域访问，在两个不同域名下进行操作
例子：
package com.imooc.ajax; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; @WebServlet("/news_list1") public class NewsListServlet1 extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String title = request.getParameter("title"); //从session中获取所有新闻 List<News> list = (List<News>) request.getSession().getAttribute("news"); //用于存储符合条件的新闻 List<News> list1 = new ArrayList<News>(); //查询符合标题的新闻 for(News news : list) { if (news.getTitle().equals(title)) { list1.add(news);break; } } String json = JSON.toJSONString(list1); response.setContentType("text/html;charset=UTF-8"); response.getWriter().println(json); } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ "url" : "/ajax/news_list", "type" : "get" , "data" : {"t":"pypl" , "abc":"123" , "uu":"777"}, //"data" : "t=pypl&abc=123&uu=777" , "dataType" : "json" , "success" : function(json){ console.log(json);//服务器返回的json数据 for(var i = 0 ; i < json.length ; i++){ $("#container").append("<h1>" + json[i].title + "</h1>"); } }, "error" : function(xmlhttp , errorText){ console.log(xmlhttp);显示错误信息 console.log(errorText);显示status的值 if(xmlhttp.status == "405"){ alert("无效的请求方式"); }else if(xmlhttp.status == "404"){ alert("未找到URL资源"); }else if(xmlhttp.status == "500"){ alert("服务器内部错误，请联系管理员"); }else{ alert("产生异常，请联系管理员"); } } }) }) </script> </head> <body> <div id="container"></div> </body> </html>
从ajax方法衍生的简化方法
| 常用项设置 | 说明 |
| $.get() | 发送get方式ajax请求 |
| $.post() | 发送post方式ajax请求 |
|
$ajaxSetup() |
设置全局默认值 |
二级联动案例：
package com.imooc.ajax; public class Channel { private String code; private String name; public Channel() { } public Channel(String code, String name) { super(); this.code = code; this.name = name; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
package com.imooc.ajax; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.alibaba.fastjson.JSON; @WebServlet("/channel") public class ChannelServlet extends HttpServlet { public ChannelServlet() { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String level = request.getParameter("level"); String parent = request.getParameter("parent"); List chlist = new ArrayList(); if(level.equals("1")) { chlist.add(new Channel("ai" , "前沿/区块链/人工智能")); chlist.add(new Channel("web" , "前端/小程序/JS")); }else if(level.equals("2")) { if(parent.equals("ai")) { chlist.add(new Channel("micro" , "微服务")); chlist.add(new Channel("blockchain" , "区块链")); chlist.add(new Channel("other" , "...")); }else if(parent.equals("web")){ chlist.add(new Channel("html" , "HTML")); chlist.add(new Channel("css" , "CSS")); chlist.add(new Channel("other" , "...")); } } String json = JSON.toJSONString(chlist); response.setContentType("text/html;charset=utf-8"); response.getWriter().println(json); } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function(){ $.ajax({ "url" : "/ajax/channel", "data" : {"level" : "1"}, "type" : "get" , "dataType" : "json" , "success" : function(json){ console.log(json); for(var i = 0 ; i < json.length ; i++){ var ch = json[i]; $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>") } } }) }) $(function(){ $("#lv1").on("change" , function(){ var parent = $(this).val(); console.log(parent); $.ajax({ "url" : "/ajax/channel" , "data" : {"level" : "2" , "parent" : parent}, "dataType" : "json" , "type" : "get" , "success" : function(json){ console.log(json); //移除所有lv2下的原始option选项 $("#lv2>option").remove(); for(var i = 0 ; i < json.length ; i++){ var ch = json[i]; $("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>") } } }) }) }) </script> </head> <body> <select id="lv1" style="width:200px;height:30px"> <option selected="selected">请选择</option> </select> <select id="lv2" style="width:200px;height:30px"></select> </body> </html>
前端框架Bootstrap
简介
该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本：<https://v3.bootcss.com/>
注意
**bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery**
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
CV大法
https://v3.bootcss.com/css/#grid-responsive-resets
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="jquery-3.5.1.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-2">
</div>
</div>
</div>
</body>
</html>
布局容器
<div class="container"> 左右两侧有留白 </div> <div class="container-fluid"> 左右两侧没有留白 </div>
# 后续在使用bootstrap做页面的时候 上来先写一个div class="container",之后在div内部书写页面
栅格系统
<div class="row"></div> 写一个row就是将所在的区域划分成12份 <div class="col-md-6 "> 获取你所要的份数 # 在使用bootstrap的时候 脑子里面一定要做12的加减法
栅格参数
.col-xs- .col-sm- .col-md- .col-lg- # 针对不同的显示器 bootstrap会自动选择对应的参数 # 如果你想要兼容所有的显示器 你就全部加上即可 # 在一行如何移动位置 <div class="col-md-8 c1 col-md-offset-2"></div> #从左到右移动两个位置
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式
效果一样，但是标签表达的意思不一样（语义）
表格
<table class="table table-hover table-striped table-bordered"> 表格 悬浮 层次分明 边框 <tr class="success"> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr>
状态类 通过这些状态类可以为行或单元格设置颜色。
| Class | 描述 |
|---|---|
.active |
鼠标悬停在行或单元格上时所设置的颜色 |
.success |
标识成功或积极的动作 |
.info |
标识普通的提示信息或动作 |
.warning |
标识警告或需要用户注意 |
.danger |
标识危险或潜在的带来负面影响的动作 |
表单
<div class="container"> <div class="col-md-8 col-md-offset-2"> <h2 class="text-center">登陆页面</h2> <form action=""> <p>username:<input type="text" class="form-control"></p> <p>password:<input type="text" class="form-control"></p> <p> <select name="" id="" class="form-control"> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> </p> <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea> <input type="submit"> </form> </div> </div> # 针对表单标签 加样式就用form-control class="form-control" """ <input type="checkbox">222 <input type="radio">333 checkbox和radio我们一般不会给它加form-control，多选单选直接使用原生的即可 """ # 针对报错信息 可以加has-error（input的父标签加） <p class="has-error"> username: <input type="text" class="form-control"> </p>
按钮
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a> <button class="btn btn-danger">按我</button> <button class="btn btn-default">按我</button> <button class="btn btn-success">按我</button> <button class="btn btn-info">按我</button> <button class="btn btn-warning">按我</button>
<p>
<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
<button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。
图片
<img src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">
图标
http://www.fontawesome.com.cn/
<h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2>
<span class="glyphicon glyphicon-th"></span>
<style> span { color: greenyellow; } </style>
导航条
<nav class="navbar navbar-inverse"> <nav class="navbar navbar-default">
分页器
<nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><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">»</span> </a> </li> </ul> </nav>
弹框
https://lipis.github.io/bootstrap-sweetalert/ https://www.sweetalert.cn/guides.html#advanced-examples
swal('你还好吗?') undefined swal('你还好吗?') undefined swal('你还好吗?','我不好，想你了!') undefined swal('你还好吗?','我不好，想你了!','success') undefined swal('你还好吗?','我不好，想你了!','warning') undefined swal('你还好吗?','我不好，想你了!','error') undefined swal('你还好吗?','我不好，想你了!','info') undefined # 我们在后面的课程中 还会涉及到该部分内容
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
