Jquery
1.什么是Jquery
JS前端框架有很多，比如：prototype、Jquery、Vue.js、Angular.js、node.js....
Jquery就是其中之一，因为通用极好，所以被广泛使用。
现在多用于写一些项目的后台UI。
国内主流：vue.js + ElementUI
2.Jquery的设计思想
Jquery将原始的dom对象封装成一个Jquery对象，然后，通过调用Jquery的内置函数来
实现对原始dom节点的操作。
Jquery不用考虑兼容问题，因为强大的Jquery把兼容问题全部解决了。
3.导入Jquery
Jquery下载地址：https://jquery.com/
<!-- 导入Jquery包 -->
<script src="../js/jquery-3.4.1.min.js"></script>
4.Jquery与js的区别
-
js语法
//获取下标为0的div节点 var div = document.getElementsByTagName('div')[0]; //设置节点的样式 div.style.width = '100px'; div.style.height = '100px'; div.style.backgroundColor = "red"; -
Jquery语法
$("div:eq(0)").css({ "width":"100px", "height":"100px", "background-color":"pink" });
对比js语法 ，JQuery语法更加简便，并且功能非常强大
5.选择器
1.什么是选择器
用于过滤页面的节点，查找指定的节点，然后操作节点。
2.选择器分类
1.基本选择器
2.层次选择器
3.属性选择器
4.筛选器
5.表单选择器
3.基本选择器
1.标签选择器
2.id选择器
3.类选择器
标签选择器：
var p = $('p');
ID选择器：
var p = $('#p5');
类选择器：
var p = $('.app');
4.层次选择器
1.直接子节点 > $('#app > .s3')
2.后代节点 空格 $('#app .s3')
3.下一个同级节点 $('#app + .s3')
4.下面的所有同级节点 $('#app ~ .s3')
直接子节点：
找到标签ID 为app 的类名.3直接子节点
<script>
$(function(){
$('#app > .s3').css("color","red");
});
</script>
</head>
<body>
<div id="app">
<span>不是app的直接子节点1</span>
<div class="main">
<span>不是app的直接子节点2</span>
</div>
<span>不是app的直接子节点3</span><br>
<span class="s3">是app的直接子节点1</span>
<p class="s3">是app的直接子节点2</p>
</div>
</body>
后代结点：
找到标签ID 为app 的类名.3所有后代节点
<script>
$(function(){
$('#app .s3').css("color","red");
});
</script>
</head>
<body>
<div id="app">
<span>不是app的直接子节点1</span>
<div class="main">
<span>不是app的直接子节点2</span>
</div>
<span>不是app的直接子节点3</span><br>
<span class="s3">是app的直接子节点1</span>
<p class="s3">是app的直接子节点2</p>
<div>
<div>
<div>
<div>
<p class="s3">很多代之后的p标签</p>
</div>
</div>
</div>
</div>
</div>
下一个同级结点：
找到标签ID 为app 的下一个同级p标签
<script>
$(function(){
$('#app + p').css("color","pink");
});
</script>
</head>
<body>
<div id="app">
</div>
<p>p1</p>
<p>p2</p>
</body>
下面所有同级结点：
找到标签ID 为app 的下面所有同级p标签
<script>
$(function(){
$('#app ~ p').css("color","red");
});
</script>
</head>
<body>
<p>p-1</p>
<p>p0</p>
<div id="app">
</div>
<p>p1</p>
<p>p2</p>
<span>s1</span>
<p>p3</p>
5.属性选择器
1.包含指定属性名的节点 [属性名]
2.包含指定属性名及属性值的节点 [属性名=属性值]
3.以指定属性值开头的节点 [属性名^=属性值]
4.以指定属性值结尾的节点 [属性名$=属性值]
5.包含指定属性值的节点 [属性名*=属性值]
1.包含指定属性名的节点 [属性名]
<script>
$(function() {
//查找包含data-els属性的节点
//$('[data-els]').css("color","red");
//查找包含data-els属性的span的节点
//$('span[data-els]').css("color","red");
$('p[data-els].p5').css("color","red");
});
</script>
</head>
<body>
<p data-els="123456">p1</p>
<p>p2</p>
<p>p3</p>
<span data-els="123456">p4</span>
<p class="p5" data-els="123456">p5</p>
</body>
2.包含指定属性名及属性值的节点 [属性名=属性值]
<script>
$(function() {
$('p[data-els=123]').css("color","red");
});
</script>
</head>
<body>
<p data-els="abc">p1</p>
<p>p2</p>
<p>p3</p>
<span data-els="123">p4</span>
<p class="p5" data-els="123">p5</p>
<p class="p6" data-els="123456">p6</p>
</body>
3.以指定属性值开头的节点 [属性名^=属性值]
<script>
$(function(){
$('[data-els^="y"]').css("color","red");
});
</script>
</head>
<body>
<p data-els="ykdong">p1</p>
</body>
4.以指定属性值结尾的节点 [属性名$=属性值]
<script>
$(function(){
$('[data-els$="g"]').css("color","red");
});
</script>
</head>
<body>
<p data-els="ykdong">p1</p>
<p data-els="jfjhfdhg">2</p>
</body>
5.包含指定属性值的节点 [属性名*=属性值]
<script>
$(function(){
$('[data-els*="d"]').css("color","red");
});
</script>
</head>
<body>
<p data-els="ykdong">p1</p>
<p data-els="jfjhfdhg">p2</p>
</body>
6.筛选器
1.查找第一个元素 $("ul > li:first")
2.查找最后一个元素 $("ul > li:last")
3.查找指定下标的元素 $("ul > li:eq(0)")
4.查找下标为偶数的元素 $("ul > li:even")
5.查找下标为奇数的元素 $("ul > li:odd")
6.查找大于下标的元素 $("ul > li:gt(2)")
7.7.查找小于下标的元素 $("ul > li:lt(2)")
1.查找第一个元素 $(“ul > li:first”)：
<script>
$(function(){
$("ul > li:first").css('color','red');
});
</script>
</head>
<body>
<ul>
<li>经济</li>
<li>军事</li>
<li>疫情</li>
<li>房产</li>
<li>教育</li>
<li>医疗</li>
</ul>
</body>
2.查找最后一个元素 $(“ul > li:last”)
<script>
$(function(){
$("ul > li:last").css('color','red');
});
</script>
3.查找指定下标的元素 $(“ul > li:eq(0)”)
<script>
$(function(){
$("ul > li:eq(3)").css('color','red');
});
</script>
4.查找下标为偶数的元素 $(“ul > li:even”)
<script>
$(function(){
$("ul > li:even").css('color','red');
});
</script>
5.查找下标为奇数的元素 $(“ul > li:odd”)
<script>
$(function(){
$("ul > li:odd").css('color','red');
});
</script>
6.查找大于下标的元素 $(“ul > li:gt(2)”)
<script>
$(function(){
$("ul > li:gt(2)").css('color','red');
});
</script>
7.7.查找小于下标的元素 $(“ul > li:lt(2)”)
<script>
$(function(){
$("ul > li:lt(2)").css('color','red');
});
</script>
7.表单选择器
1.匹配所有表单元素 $(":input")
2.匹配所有多选元素 $(':checkbox')
3.匹配所有文本元素$(':text')
4.匹配指定状态的元素$(':disabled')
1.匹配所有表单元素 $(“:input”)
var is = $(':input');
2.匹配所有多选元素 $(‘:checkbox’)
$(function(){
//获取最后一个多选框，并且设置为选中不可修改状态。
$(':checkbox:last').prop("checked",true).prop("disabled",true);
})
3.匹配所有文本元素$(‘:text’)
//获取所有表单元素
var is = $(':text');
4.匹配指定状态的元素$(‘:disabled’)
//获取指定状态的节点
$(':text:disabled').val('abcd');
6.遍历
1.集合中的第一个元素 $("li").first()
2.集合中的最后一个元素 $("li").last()
3.元素的下一个同级元素 $("li").next() 只查找指定节点的下一个元素
4.元素的上一个同级元素 $("li").prev() 只查找指定节点的上一个元素
5.元素的上面所有同级元素 $('#app').prevAll('.pre')
6.元素的下面所有同级元素 $('#app').nextAll('.pre')
7.指定节点的父节点 $('p:eq(0)').parent()
8.指定节点的所有父节点 $('p:eq(0)')parents('#app')
9.集合中的是定下标的元素 $("li").eq(3)
10.指定节点的指定元素 $('#app').find('p:eq(0)')
11.指定节点的所有同级元素 $('#app').siblings('span')
12.指定节点的所有子元素 $('#app').children('span')
13.过滤选择器的元素 $("p").filter('[hello="world"]')
14.返回不匹配指定选择器的元素 $("p").not('[hello="world"]')
7.Jquery事件
1.鼠标事件
1.单击事件
2.双击事件
3.鼠标移入
4.鼠标移出
5.鼠标悬浮
单击
$('button').click(()=>{
alert('单击事件被触发....');
});
双击
$(function(){
$('button').dblclick(()=>{
alert('双击事件被触发....');
});
})
鼠标移入移出
$(function(){
$('div:eq(0)').mouseover(()=>{
$('div:eq(0)').css('background-color',"red");
}).mouseout(()=>{
$('div:eq(0)').css('background-color',"aqua");
})
})
$().mouseover() and $().mouseout()
鼠标悬浮：
$(function(){
$('div:eq(0)').hover(()=>{
$('div:eq(0)').css('background-color',"red");
});
})
2.键盘事件
1.键盘按下 .keydown((event)
2.键盘抬起 .keyup((event)
3.表单事件 .submit() 提交 .change(function()) 选择框 .focus(）焦点
.blur(） 失去焦点
1.change
2.foucs
3.blur
4.submit
8.DOM
1.样式操作
addClass:
$("#d2").addClass("node");
css
$('p').css("color", "red");
$('#d1').css({
"width": "100px",
"height": "100",
"background-color": "red",
});
切换样式：
$("button").click(function(){
$("#d3").toggleClass("node");
})
2.属性操作
attr 适用于属性有具体值的属性
prop 适用于属性只有true和false的属性。
<body>
<img src="" width="100" height="200"/>
<a href="#">百度</a>
<script>
$('img').attr('src','../../img/lp.jpg');
$('a').attr("href","https://www.baidu.com");
</script>
</body>
3.内容操作
text()
<script>
$(function(){
//设置文本方法
$("p:eq(0)").text("<span>welcome to 蚌埠</span>")
//获取文本
var txt = $("p:eq(1)").text();
console.log(txt);
})
html()
<script>
$(function(){
//设置文本方法
$("p:eq(0)").html("<span style='color:red'>welcome to 蚌埠</span>")
//获取文本
var txt = $("p:eq(1)").html();
console.log(txt);
})
</script>
val()
<script>
$(function(){
//设置第一个输入框的值
$(":input:eq(0)").val("蚌埠住了");
//获取值
console.log($(":input:eq(1)").val());
})
</script>
表单序列化：
与ajax 的xhr.send()方法比较 ，serialize() 可以提交更简便的提交一组数据
<form action="xxx.php">
账号:<input type="text" name="username"/><br/>
密码:<input type="password" name="password"/><br/>
邮箱:<input type="email" name="email"/><br/>
号码:<input type="text" name="tel"/><br/>
性别:男<input type="radio" value="0" name="sex" checked/>
女<input type="radio" value="1" name="sex"><br/>
<input type="submit" value="提交"/>
</form>
<button>异步提交</button>
<script>
$("button:eq(0)").click(function(){
//序列化表单
var form = $("form").serialize();
console.log(form);
})
</script>
9.Jquery对ajax的支持【重点】
ajax();
该方法用于向指定的服务器发送一个异步请求
属性：
url:请求地址
type：请求方式
data：请求数据
dataType：响应的数据类型
text json
success：服务器返回成功后的回调函数。
ajax 提交到我们的IDEA tomcat 里面的部署sevlet 跨域提交
<form action="wait">
账号:<input type="text" name="username" />
<span id="username_msg"></span>
<br />
密码:<input type="password" name="pwd" /><br />
年龄:<input type="text" name="nl" /><br />
</form>
<button>发送ajax</button>
<script>
$("button:eq(0)").click(function() {
$.ajax({
url: "http://127.0.0.1:8080/01_ajax_wait_response_war_exploded/checkusername",
type: "post",
async:true,
data: {
"username": $(":input:eq(0)").val()
},
dataType: "text",
success: function(data) {
/*
data就是服务器返回的数据。
可以是任何类型。
*/
if(data == '√用户名可以使用'){
$("#username_msg").text(data).css("color","green");
}else{
$("#username_msg").text(data).css("color","red");
}
}
});
});
</script>
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
