jQuery
jQuery概念
-
jQuery就是JavaScript和查询(Query)，通过js代码实现对页面的快速查询。
-
它的核心思想是write less，do more(写的更少，做的更多)
-
jQuery是一款优秀的，快速的，简洁Javascript框架(代码库)。
-
在它内部封装了JavaScript功能代码，使用来优化HTML文档处理，事件处理，和Ajax交互。
-
JavaScript矿建：本质上就是一些js文件。在它内部封装了js的原生代码而已。
// 封装一下根据id获取页面元素的方式 function $(selector) { if (selector.startsWith("#")) { var ele = document.getElementById(selector.substring(1)); return ele; } else if (selector.startsWith(".")){ var elementsByClassName = document.getElementsByClassName(selector.substring(1)); return elementsByClassName; } else { var elementsByTagName = document.getElementsByTagName(selector); return elementsByTagName; } }<script src = "./js/zhiyou.js"></script> <script> window.onload = function () { // 获取页面中的input标签元素 id ClassName name TagName // 通过id的方式来获取的 var input01 = $("#lq"); var input02 = $("#zq"); alert(input01.value); alert(input02.value); var inputs = $(".inp01"); alert(inputs[0].value); alert(inputs[1].value); // 通过标签选择器来获取页面中的元素 var elementsByTagName = $("input"); alert(elementsByTagName); } </script> </head> <body> <input type="text" value="篮球" id="lq" /> <input type="text" value="足球" id="zq" /> <input type="text" value="乒乓球" class="inp01"/> <input type="text" value="排球" class="inp01" /> </body>
快速入门
- 步骤
- 下载一个jp插件
- 版本介绍：目前市面上有三种版本，优先使用1.xxx
- 压缩版本(jquery.min.js<生产版本，体积较小，加载快>)，和为压缩版本(jquery.js<开发版本>)
- 在项目中引入jquery插件，引入到web目录下，在web目录下新建一个js文件，粘贴进去。
- 在页面中通过 <script src = "jQuery路径"></script>
两种对象获取方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
onload = function (ev) {
//dom对象获取方式
var elementById1 = document.getElementById("lq");
var elementById = document.getElementById("zq");
//alert(elementById)//[object HTMLInputElement]
//alert(elementById1)//[object HTMLInputElement]
//使用jQuery对象获取方式 选择器 --》参考css中的选择器语法
var $lq = $("#lq");
var $zq = $("#zq");
//alert($lq)//[object Object]
//alert($zq)//[object Object]
var inputs = document.getElementsByClassName("inp01");
//alert(inputs.length)//2
//alert(inputs.size)//undefined
var $input01 = $(".inp01");
//alert($input01.length)//2
//alert($input01.size())//2
//原生js方式 --》获取inputs对象数组 value
/*for (var i = 0; i < inputs.length; i++) {
alert(inputs[i].value)
}*/
//jquery 方式 获取input输入框中的值
//alert($input01.val()) // 两个input输入框(只输出了一个)
/*for (var i = 0; i <$input01.length ; i++) {
//$input01[i] -->把jQuery对象转换成dom对象
alert( $input01[i].value)
}*/
//两个对象相互转换
//1. jq -》dom ：jQuery对象[索引] / jQuery对象.get(索引)
var $input = $("input");
/*for (var i = 0; i <$input.size() ; i++) {
//$input[i].value="棒球" //第一种
$input.get(i).value="羽毛球" //第二种
}*/
//2. dom ->jq对象 $(dom对象)
var tagName = document.getElementsByTagName("input");
$(tagName).val("铅球")
//jQuery对象在调用方法时，如果是修改的话，先内部遍历到每一个jQuery对象，然后再次执行该方法
//html()
//$("div").html("我是一个div标签")
}
</script>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
</body>
jQuery对象和js原生对象的区别与转换
- 获取方式：
- jQuery对象：通过$("选择器")方式来获取页面元素
- js原生dom对象：通过window.document.getElementByXxxx() 方式来获取的
- jQuery和js原生的dom对象的方法不通用。不能互调。
- 两者之间可以相互转换
- jq -》dom ：jQuery对象[索引] / jQuery对象.get(索引)
- dom 《-jq ：$()
- 备注：js只能通过四种方式来获取页面中的元素document.getElementByXxx()，相对于js原生方式来说，jQuery获取页面元素更加灵活，可以借助于css选择器来实现。
js遍历注意事项
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>-->
<script type="text/javascript">
onload = function (ev) {
//获取input所有标签
var tagName = document.getElementsByTagName("input");
//遍历
// of --> 获取的是对象数组中的每一个对象也就是vlaue值["xm","xh","xs","xl"]
for (let tn of tagName) {
tagName.value = "棒球";
}
//in --> 获取的是对象数组中的每一个对象对应的索引值["xm","xh","xs","xl"]-》0 1 2 3
for (var tn in tagName) {
tagName[tn].value = "羽毛球";
}
/*
* for in -》es5 遍历key值 索引
* 只能用于数组的遍历
* for of -》es6 遍历value值 对象
* 不但可以用于数组的遍历，还可以用于对象中的属性集
* */
/*
* document.write() 方法可以用于向页面插入一些内容，浏览器会按照html元素的顺序依此解析出来。并展示
* 注意：当文档一旦加载完毕。document.write()会覆盖以往的页面内容
* 也就是浏览器会重写document对象内容
* */
}
</script>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
<script type="text/javascript">
document.write("<hr>") //此时不会覆盖
window.onload = function (ev) {
document.write("<hr>")//此时会覆盖
}
</script>
</body>
事件绑定
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
onload = function () {
/*//给第一个input标签绑定 点击事件
var inputLQ = document.getElementById("lq");
inputLQ.onclick = function () {
alert("我被点到了")
}
$("#zq").click(function () {
alert("我被点到了")
})
$("#ppq").dblclick(function () {
alert("我被双击点到了")
})
//时间注册
$("#pq").on("click", function () {
alert("我被点到了")
})*/
$("#zq").on("focus",function () {
//$("#zq").val("排球")
//this指代的是当前操作的dom对象
this.value=("羽毛球");
})
$("#zq").on("blur",function () {
this.value="棒球";
})
}
</script>
</head>
<body>
<div>div1</div>
<div>div1</div>
<div>div1</div>
<input type="text" value="篮球" id="lq">
<input type="text" value="足球" id="zq">
<input type="text" value="乒乓求" id="ppq" class="inp01">
<input type="text" value="排球" id="pq" class="inp01">
</body>
选择器
-
作用：筛选具有相似特征的元素标签。
-
基本操作：
-
事件绑定
事件源(标签)+事件名称(具体事件)+监听器(实现的代码)
-
页面加载
- 当页面加载的时候需要给事件源绑定事件，以及做相关的事情业务。如果我们用原生js方式：window.onload=function() {};,如果我们使用jQuery方式实现页面加载方式：$(document).ready(function(){ });
- 在实际开发中，我们一般用它的简化版，格式：$(function(){})
- 对比原生js方式区别：window.onload=function=(){};如果原生js如果书写多个，那么会出现覆盖效果(后一个把前一个覆盖了)。但是对于jQuery来说，可以书写多个页面载入函数--》入口函数
- jQuery和原生js在进行载入的时候有先后顺序。jQuery加载时机优先于原生js方式。
-
样式控制：css()方法 --》style
-
单个样式
语法格式：$("选择器").css("属性名"."属性值");
-
多个样式
语法格式：$("选择器").css({"属性名":"属性值","属性名":"属性值"...});
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { //给第一个div标签设置背景 document.getElementsByTagName("div")[0].style.backgroundColor="red" $("#div02").css("background-Color","blue") var css = $("#div03").css("background-Color"); //alert(css)//rgb(255, 192, 203) //给第二个div设置多个样式 $("#div02").css({"backgroundColor":"grey","height":"500px","width":"500px", "font-size":"30px","font-wight":"bolder"}) }) </script> </head> <body> <div>div1</div> <div id="div02">div1</div> <div id="div03" style="background-color: pink">div1</div> <input type="text" value="篮球" id="lq"> <input type="text" value="足球" id="zq"> <input type="text" value="乒乓求" id="ppq" class="inp01"> <input type="text" value="排球" id="pq" class="inp01"> </body> -
-
分类
基本选择器：
- id选择器，格式：$("#id值") 获取的是单个标签元素
- class选择器，格式：$(".class值") 获取的是指定的class属性值对应的标签元素
- 标签选择器，格式：$("标签名") 获取的页面所有匹配的标签元素
- 并集选择器，格式：$("选择器1","选择器2",...) 获取的是匹配选择器中对应的标签元素
- 交际选择器，格式：$("选择器1""选择器2"...)获取的是满足同时满足多个选择器对应的标签元素
层级选择器：
- 后代选择器，格式：$("选择器1" "选择器2") (注意有空格)选择选择器1内部的所有选择器对应的标签元素。
- 子选择器，格式：$("选择器1">"选择器2") 获取选择器1内部所有选择器2对应的直接子标签。
属性选择器：表单标签使用较多
-
属性选择器：表单标签中使用较多
$("标签名[属性=属性值]") 获取的是就是u指定的属性名=属性值对应的标签元素
-
符合属性选择器：
$("标签名[属性名1=属性值][属性名2=属性值]...") 获取同时满足多个属性名=属性值对应的标签元素。
过滤选择器
-
偶数选择器
:even 从零开始计数 索引 $("div:even") 索引02468..-->对应的标签顺序1357..
-
奇数选择器
:odd 从零开始计数 索引 $("div:odd") 索引1357..-->标签顺序2468..
-
大于索引选择器
gt:(索引值)
-
小于索引选择器
lt:(索引值)
-
等于索引选择器
eq:(索引值)
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//入口函数
$(function () {
//奇数行的颜色为绿色 索引依然是从零开始计算 1357 标签顺序2468
//tr --》获取的是所有的jQuery对象
//列标题过滤掉 索引是从0开始计数的
$("tr:gt(0):odd").css("background-color", "green");
//偶数行的颜色为粉色
$("tr:gt(0):even").css("background-color", "pink");
})
</script>
</head>
<body>
<table border="1" align="center" width="500px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</table>
表单过滤选择器
-
可用元素选择器
:enable 获取可用元素
-
不可用元素选择器
:disabled 获取不可用元素
-
选中元素选择器
-
下拉列表中
:selected 获取到的下拉列表中的选中的元素
-
互斥
:checked 获取到的是互斥单选框或者复选框选中的元素
-
DOM操作
内容操作
-
html() -->innerHTML 获取元素的内容，设置元素的内容 内容=文本内容/子标签
-
text() -->innerText 只能获取到标签的纯文本信息
-
val() -->value 获取标签的value属性值
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="WEB-INF/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { var html = $("div").html(); //alert(html)//<a></a> //$("div").html("<h3>我是一个大标题</h3>") var text = $("div").text(); //alert(text)//超链接 (纯文本内容超链接拿取不到) var val = $("option").val(); }) </script> </head> <body> <div> <select> <option value="中国"></option> <option value="美国"></option> </select> <a href="#">超链接</a> </div> </body>
属性操作
属性
-
attr() 获取指定的属性
-
removeAttr() 删除属性
-
prop() 获取与设置属性值
-
removeprop 删除属性值
-
attr和prop区别
如果操作的是标签本身的属性建议使用prop()
如果操作的是自定义的属性建议attr()
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./WEB-INF/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { //attr $("img").attr("src","032.jpg") //var attr = $("img").attr("src"); //alert(attr) //$("img").attr("name","励志语句") //removeAttr //$("img").removeAttr("name")//通过key值删除 //prop //$("img").prop("src","032.jpg") //removeProp //$("img").removeProp("alt") }) </script> </head> <body> <img src="" alt=""/> </body>
css类
-
addClass() 添加class属性值
-
removeClass 删除class属性值
-
toggleClass 切换class属性值，有删除掉，没有就添加上去
<head> <style> .div01 { height: 500px; 500px; background-color: pink; border: 1px dotted hotpink; } .div02 { height: 200px; 300px; background-color: purple; border: 1px dashed darkgreen; } </style> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./WEB-INF/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { //$("div").addClass("div01") $("#it1").on("click",function () { $("div").addClass("div01") $("div").removeClass("div02") }) $("#it2").on("click",function () { $("div").addClass("div02") $("div").removeClass("div01") }) //toggleClass() 有就删除class属性值 没有就添加 /*$("#it1").on("click",function () { $("div").toggleClass("div01");//开关技术 })*/ }) </script> </head> <body> <div></div> <input id="it1" type="button" value="切换第一种风格"> <input id="it2" type="button" value="切换第二种风格"> </body>
节点操作 CRUD操作
-
添加节点
-
append() ：通过父元素将子元素添加到父元素的末尾
格式：父元素对象(jQuery).append(子元素对") ：将子元素对象添加到父元素对象的内部，位置在末尾
-
prepend() ：通过父元素将子元素添加到父元素的头部
格式：父元素对象(jQuery).prepend(子元素对象) ：将子元素对象添加到父元素对象的内部，位置在头部
-
appendTo() ：通过子元素将自己添加父元素内部，并且位置在末尾
格式：子元素对象.appendTo(父元素对象) ：将自己添加父元素内部，并且位置在末尾
-
prependTo() 通过子元素将自己添加父元素内部，并且位置在头部
格式：子元素对象.prependTo(父元素对象) ：将自己添加父元素内部，并且位置在头部
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="./WEB-INF/js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $("#btn").on("click",function () { var $One = $("#One");//ul对象 var $atp = $("#atp");//li对象 $One.append($atp) }) $("#btn2").on("click",function () { var $One = $("#One");//ul对象 var $atp = $("#bigData");//li对象 $One.prepend($atp) }) }) </script> </head> <body> 专业: <ul id="One"> <li>计算机科学应用</li> <li>捂脸往</li> <li>软件工厂</li> <li>通信工程</li> </ul> 相关专业 <ul id="Two"> <li id="atp">人工智能</li> <li>ai技术</li> <li id="bigData">大数据</li> </ul> <input type="button" id="btn" value="添加"> <input type="button" id="btn2" value="添加"> </body> -
after() ：添加元素到指定元素的后面
格式：对象1.after(对象2) --》 将对象2放到对象1后面，对象1和对象2是同级关系-->兄弟关系
<div> <div> </div> </div> <div> </div> -
before() ：添加元素到指定元素的前面
格式：对象1.before(对象2) --》将对象2添加到对象1道德前面，对象1和对象2是同级关系-->兄弟关系
-
-
删除节点
-
remove() 删除元素
格式：对象.remove() ：将此对象删除掉(把自己删除掉)
-
empty() 清空元素的所有后代元素
格式：对象.empty() ：将此对象的所有后代删掉，清空，但是保留当前自己对象以及属性节点。
-
-
修改节点
-
查询节点
This用法
- 如果在调用方法时需要获取标签元素本身，在方法上设定参数为this，此时this表示当前标签。
- 对于标签如果添加onclick或者onmouse方法的时候，如果方法在<script>标签中直接定义的，那么在方法中获取的this指代的是当前窗口对象window，并不会指代当前标签本身。所以需要获取标签本身的话，直接在方法定义的时候直接使用this作为参数传递
- 如果js中获取到了某个标签，然后给其绑定某个事件对应的方式，此方法中的this指代的是这个对象的本身。
Serialize方法
-
概念：序列化，此时在jQuery中针对的是表单提交。
通过这个方法一次性获取到表单中所有值，生成一个字符串，格式：username=zhangsan&password=123445&age=18...