JQuery
内容导航
Javaweb — emmm……刚好刚好， 基础技术全都……
这两天因为充足的时间，JSP，AJAX都很快的过了
之前JavaScript写完本来是要写JQuery的，但是没成想忘记了，进入了servlet的web编程；技术的出现都会为了更加方便的编程，特别是一些规模较小的技术，JSP为了减少Servlet的输出的冗杂问题，AjAX提供了异步刷新的问题，带来了更好的体验；— 本来是JS和XML，现在是JS和JSON； 而JSP中的EL技术简化了输出的步骤； 而JQuery的出现就是简化JavaScript的BOM编程
因为JS编程的BOM部分，要获取结点只能是getElementByID ----- 这个很长，如果没有提示就很难书写，所以就要使用JQurey；方法名长并且区分大小写，因此代码量还非常大
这里首先来一段传统的DOM操作代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery介绍</title>
<script type="text/javascript">
fun = function() {
console.log(document.getElementById("text1").value);
console.log(document.getElementById("text2").value);
}
</script>
</head>
<body>
<input id="text1" type="text" value="张三" />
<input id="text2" type="text" value="正在看正则表达式" />
<input type="button" value="获取" onclick="fun()" />
</body>
</html>
document.getElementById(“text1”).value就可以获取文本框的内容，但是这里的代码量太大了，导致开发的时候会浪费时间，开发应该将时间花在更有价值的地方
封装方法提升获取DOM的效率
上面的一长串代码，可以发现，只有id的位置不同，其他的代码都是相同的，那就用一个方法将这种操作给封装起来
//自定义方法，快捷获取对象
getDomObj = function(objID) {
return document.getElementById(objID);
}
所以直接使用上面的方法
console.log(getDomObj("text1").value); //这里相当于是this调用的
但是这个方法名还是挺长的，可以把名字极限省略，变为a — 》a太常用了，容易冲突，换成美元符号$
a = function(objID) {
return document.getElementById(objID);
}
console.log(a("text1").value);
-----------------------------
$ = function(objID) {
return document.getElementById(objID);
}
console.log($("text1").value);
$就是一个函数名称，看到这个字符就知道是操作什么，简化对于DOM对象的处理
JQuery的介绍
JQuery是一款快主流浏览器的JavaScript库，封装了JavaScript相关方法的调用，简化了JavaScript对于HTML的DOM操作。 库就是一个存放的仓库，JQuery中就是js代码书写的function ----- 这些function的作用就是使得HTML文档遍历、操作、事件处理、动画和Ajax变得更加简单，提高了功能性和扩展性 ----- 【原生的AJAX需要四步，非常的固定化，并且重复化，所以该封装的就得封装】
比如对于DOM对象的操作
//通过ID属性获取对象 document.getElementByid(); --->
$("#id");
//通过class属性获取对象 document.getElementByClassName(); --->
$(".class名");
//通过标签名获取对象 document.getElementByTagName(); --->
$(标签名);
其中的#，. 还有缺省就是用于区分三种方式，和CSS中相同
JQuery可以直接在官网下载即可，一般开发使用原版；上线之后使用压缩版，因为互联网B/S结构方便传输
JQuery引入 window.onload = function(){} – 简化$()
这里放一段使用JQuery的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery简单介绍</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script> <!--将JQuery库引入 -->
<script type="text/javascript">
$(document).ready(function(){
alert("你好")
})
/*
1.$(document)，$是JQuery中的函数名称，document是函数的参数，document一定程度上相当于window
作用是将document对象变成JQuery可以使用的对象
2.ready是JQuery中的函数，准备 -- 当页面的dom加载完毕后才会执行ready函数的内容，就相当于
JS中的window.onload
3.function函数就是自定义的函数，当页面加载完毕之后会执行
*/
</script>
</head>
<body>
</body>
</html>
这里就是最主要的就是==$(document).ready()==，要将document转化成JQuery可以操作的对象； 这段代码的功能和之前JS的操作的最开始用一个window.onload相同，都是页面加载成功之后
上面是标准版的写法，还有简化版的，直接省略ready和docum $( function(){} )
$(function(){
alert("你好")
})
其实就是
$( function(){} ) //$函数中的函数都是页面加载之后才会执行，这就是简化版
这里的写法有多种
$(document).ready()
$()
JQuery()
window.JQuery() 都是等价的 最常使用的还是$()
DOM对象和JQuery对象
- dom ----- 文档对象模型，document object model DOM，是处理可扩展标志语言的标准编程接口； 通过DOM对HTML页面的解析，可以将页面元素解析成一棵树，DOM对象可以使用JavaScript中的方法，dom对象也是JS对象
var obj = documnet.getElementByid("mytext"); //obj就是一个dom对象，也是一个js对象
- JQuey对象 ： 使用Jquery语法表示的对象叫做JQuery对象，注意 ：
JQuery表示的对象都是数组，比如
var jobj = $("#txt1") 这里的jobj就是一个JQuery对象，它是一个数组， 只是这是id来定义的，这个数组种只有一个值； 以.class或者标签获得的数组就不止一个值
DOM对象和JQuery对象可以相互转换
DOM对象转JQuery对象 ：
$(dom对象) -------------- > jquery对象
JQuery对象也可以转为dom对象，
从数组种获取第一个对象【第一个对象就是dom对象】 使用[0]或者get{0}
进行dom或者jquery的转换的目的是使用对象的方法，如果想用dom对象的属性和方法就必须进行转换，比如value 等属性值 ； 想要使用jquery方法也要转化为jquery对象
Dom对象转JQuery对象
使用$(dom对象)的格式，可以转为JQuery对象，命名JQuery对象，习惯性以美元符号开始
这里先来一段常规的JS程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dom对象转JQuery对象</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script> <!--将JQuery库引入 -->
<script type="text/javascript">
window.onload = function(){ //按顺序执行，页面要加载完毕才可以
var btn = document.getElementById("btn1")
btn.onclick = function(){
alert("常规方式" + btn.value);
//转化为JQuery对象，然后使用JQuery中的val方法可以和value的效果相同
var $btn = $(btn);
alert($btn.val());
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="我是按钮" />
</body>
</html>
这里再HBuilder中可以使用JQuery的提示库，JQuery中的方法书写都很简单；直接将dom对象放在$()中就变为了JQuery对象
JQuery对象转dom对象
JQuery转为dom，因为JQuery对象都是一个数组，所以可以直接取下标0； 或者使用JQuery对象的方法get就可以得到dom对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery简单介绍</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script> <!--将JQuery库引入 -->
<script type="text/javascript">
//获取输入的文本框的内容
btnclk = function() {
//使用JQuery方式获取成JQuery对象
//alert($("#txt")[0].value); //获取到的是数组，使用get(0)或者[0]都可以转为普通dom对象
alert($("#txt").get(0).value);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" onclick="btnclk()" /><br/>
<input id="txt" type="text"/>
</body>
</html>
$("#txt").get(0).value 这里#就是通过id获取，.就是通过class获取，无就是通过标签获取
基本选择器 # . 无
选择器：就是定位条件，通知JQuery函数定位满足条件的DOM对象；其实和CSS是相同的
选择器就是字符串，可以用来定位dom对象，常见的选择器有id选择器，标签选择器，类选择器
- id选择器 ： $("#") 通过id来定位dom对象，id在当前页面是唯一的
- class选择器： $(".") 通过class 样式定位dom对象
- 标签选择器： $("") 使用标签名来定位dom对象 ---- 加上了（）所以就是一个jquery对象
在编辑器中使用JQuery的语法提示库，就可以非常方便的提示了；上面的位置已经使用过了按照id选择的
alert($("#txt").get(0).value);
这里再举一个例子，使用jquery对象的css方法可以改变对象的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery简单介绍</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script> <!--将JQuery库引入 -->
<style type="text/css">
div{
background-color: aquamarine;
height: 200px;
width: 300px;
}
</style>
<script type="text/javascript">
btnclk = function() {
//通过标签获取第一个div，改变其样式--背景色改为红色
//这里就直接使用jquery的方法css就可以修改
$("#one").css("background-color","red");
}
btnclk1 = function() {
//通过class样式获取第二个div；使用样式选择器
$(".two").css("background-color","yellow");
}
btnclk2 = function(){
//通过标签获取dom对象，这样获取的对象不止一个，这里有3个
$("div").css("background-color","black");
}
</script>
</head>
<body>
<div id="one">我是第一个div，使用标签</div><br>
<div class="two">我是第二个div，使用的样式</div><br/>
<div>我是一个普通的div</div> <br><br>
<input type="button" value="通过id获取dom对象" onclick="btnclk()"/><br/>
<input type="button" value="通过class获取dom对象" onclick="btnclk1()"/><br>
<input type="button" value="通过标签获取dom对象" onclick="btnclk2()"/>
</body>
</html>
注意Jquery函数是会操作对象数组的每一个对象，所以标签定位的就会改变所有的标签；class是自定义样式，所有应用该样式的标签都要加上属性class；相当于就是一个类了，可以按照类来理解；归类；
所有选择器 $("*")
如果不加具体的选择,也可以使用全部选择器，也就是全选所有的对象，也就是$("*")
组合选择器
这个在CSS中也有，就是搭配多个，将多个被选择的对象间使用，分隔姓曾的选择器
$("#id,.class,type")
表单选择器 :
表单相关的元素选择器是指文本框、单选器、复选框、下列表等元素的选择方式，该方法无论是否存在表form都可以做出选择；表单选择器是为了更加容易操作表单，更具元素类型来操作的
$(":type属性值")
比如
$(":text") 所有的文本框
$(":radio") 所有的单选框
快速定义所有的一类对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery简单介绍</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script> <!--将JQuery库引入 -->
<script type="text/javascript">
btnclk = function(){
//使用表单选择器，读取所有文本框的值 这里就一个
alert($(":text").val());
//使用表单选择器读取多有的单选按钮，这里有两个
var $rdio = $(":radio"); //一个jquery对象数组
for(var i = 0; i < $rdio.length; i++) {
//获取成员，使用下标的方式---- 使用了下标就变成了dom对象，就不能使用jquery的方法eval了
var dom = $rdio[i];
console.log(dom.value);
}
//使用表单选择取读取checkbox;这里使用jquery的val函数获取
var $chebox = $(":checkbox");
for(var i = 0; i < $chebox.length; i++) {
//变成jquery对象会多此一举，但是还是看看
var dom = $chebox[i];
var $dom = $(dom);
console.log($dom.val());
}
}
</script>
</head>
<body>
<input type="text" value="我是一个type=text" />
<br>
<input type="radio" value="man" />男<br>
<input type="radio" value="women"/>女 <br>
<br/>
<input type="checkbox" value="bike" />骑自行车<br/>
<input type="checkbox" value="soccer" />踢足球<br/>
<input type="checkbox" value="ping-pong" />骑行<br/>
<br>
<input type="button" value="操作" onclick="btnclk()"/><br/>
</body>
</html>
获取的JQuey对象都是一个数组，只是根据id或者其他的获取的只有一个对象，就可以直接用jquery的eval方法获取；但是如果是数组，通过下标方式就会转化为dom对象，就不能使用jquery的方法，而只能使用js中的方法
还有其他的选择器这里就先不深入了，以后遇到单独分享； — 还有注意不要和EL表达式弄混淆了，EL表达式时大括号，这里的选择器都是小括号；并且形式不一样
过滤器
JQuery对象中存储的Dom对象顺序和页面标签声明的顺序是一致的，也就是先出现的会先进入数组
在servlet中分享过监听器和过滤器，监听器可以监听对应的共享与的创建销毁或者属性变化的时刻；过滤器可以拦截所有目标路径的请求并进行过滤；满足调节的直接使用方法放行
在JQuery中也有过滤器；过滤器就是过滤条件，对已经定位到数组的DOM对象进行过滤筛选，过滤条件不能独立出现，必须出现在选择器的后方 在定位了dom对象后，根据一些条件筛选dom对象，也是字符串；直接跟在选择器后方
基本过滤器
- 选择第一个first，保留数组的第一个DOM对象
$("选择器:first")
- 选择最后一个last，保留数组的最后一个DOM对象
$("选择器:last")
- 选择数组中的指定的对象 根据下标 eq
$("选择器:eq(index)") index是数组的下标
- 选择小于指定对象的所有的对象，也是下标 lt
$("选择器:lt(index)")
- 选择大于指定对象的所有的对象，下标gt
$("选择器:gt(index)")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
background-color: aquamarine;
height: 20px;
width: 200px;
}
</style>
<script type="text/javascript">
func = function(){
//选择第一个div；改变颜色
//$("div:first").css("background-color","yellow");
//选额最后一个div，改变颜色 选择器和过滤器都是字符串，都在""中 first和last和eq都是过滤只剩1个
//$("div:last").css("background-color","red");
//选择下标为3的，也就是第4个div;使用的都是两字符的eq
//$("div:eq(3)").css("background-color","red");
//选择下标大于0的，也就是除了第一个所有的div；css方法可以直接变化所有，不需要遍历
//$("div:gt(0)").css("background-color","red");
//选择下标小于3的，也就是前三个div
$("div:lt(3)").css("background-color","red");
}
</script>
</head>
<body>
<div>我是div1</div><br>
<div>我是div2</div><br>
<div>我是div3</div><br>
<div>我是div4</div><br>
<div>我是div5</div><br>
<div>我是div7</div><br>
<div>我是div8</div><br>
<input type="button" value="功能按钮" onclick="func()" />
</body>
</html>
上面看到了JQuery的一个重要的手段就是快捷得到dom对象进行操作，不需要用长的方法获取，并且和CSS有相似之处，这里.是class； #是id； 无 是标签 ； : 是表单选择器【没有forn没有关系，主要是其内部的几个标签】
表单属性过滤器
上面的基本过滤器其实都是根据下标来进行过滤的，选择器中除了基本的选择器，还有表单选择器，那么对应的也有表单属性过滤器；根据表单的dom状态情况，定位dom对象
启用状态 enabled 不可用状态disabled 选中状态 checked
- 选择可用状态的文本框
$(":text:enabled") 前面的:是表单选择器；后面的是过滤器
- 选择不可用状态的文本框 注意禁用状态disabled和只读readonly有区别，后者只是限制不能修改，但是还可以获取焦点，但是禁用就什么都不能操作
$(":text:disabled")
- 复选框选中的元素
$(":checkbox:checked")
- 下拉列表框中被选中的元素
$("选择器>option:selected") 前面是选择器，因为使用了标签，select标签没有type属性，不是表单选择器
选择器就是父，option就是子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){//页面加载完毕，获取按钮对象
$(":button").click(function(){
//过滤可用状态的文本框;输出value
//console.log($(":text:enabled").val()); // 输出了文本框3的内容
/*
//过滤出不可用状态的文本框;输出value
var $text = $(":text:disabled"); //val函数和css函数不同，不会作用每一个
for(var i = 0; i < $text.length; i++) {
console.log($text[i].value); //这里下标就变成了dom对象，不能使用val方法
}//这里就输出了文本框1和2的内容
*/
//过滤复选框中的内容 --- 这里只有一项选中
//console.log($(":checkbox:checked").val()); ping-pong
//过滤出下拉列表中选中的内容;这里也只有一项
console.log($("select>option:selected").val()); //这里的select标签不是type属性，是属于普通的选择器 bj
})
})
</script>
</head>
<body>
文本框1：<input type="text" value="我是文本框1" disabled/><br/>
文本框2：<input type="text" value="我是文本框2" disabled/><br/>
文本框3：<input type="text" value="我是文本框3"/><br/>
<input type="checkbox" value="bike" />骑自行车<br/>
<input type="checkbox" value="soccer" />踢足球<br/>
<input type="checkbox" value="ping-pong" checked/>骑行<br/>
<select>
<option value="null">请选择省份</option>
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="tj">天津</option>
</select>
<br>
<input type="button" value="功能" />
</body>
</html>
需要注意的地方就是这里的select是普通的选择器，不是表单选择器，虽然可以在表单中，但是没有type属性
JQuery绑定事件
其实大概和之前差不多，但是省略了很多，首先是用选择器获得dom对象，然后.引用事件【不是事件句柄，去掉on】；直接加上括号，括号中就是处理函数 所选择的所有的对象都会绑定上这个事件
$("选择器").事件名称(处理函数)
$("#mybtn").click(function(){ //这里的click()就是JQuery中的函数，因为domk中式onclick = function(){}
……
})
注意这种绑定事件的方式一定要页面加载玩之后，所以在$()中
其实上面的页面加载事件就是这样子的格式【标准版】
将document变成了jquery对象----$(document).ready(function() {}) 简化之后就是
$(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
background-color: aquamarine;
height: 20px;
width: 200px;
}
</style>
<script type="text/javascript">
//回调函数，给按钮绑定事件
$(function(){
//这种绑定方式一定要页面加载完毕之后才能使用，因为要获取按钮对象，按照先后顺序，执行script标签时还没有button
$(":button").click(function(){
//选择第一个div；改变颜色
//$("div:first").css("background-color","yellow");
//选额最后一个div，改变颜色 选择器和过滤器都是字符串，都在""中 first和last和eq都是过滤只剩1个
//$("div:last").css("background-color","red");
//选择下标为3的，也就是第4个div;使用的都是两字符的eq
//$("div:eq(3)").css("background-color","red");
//选择下标大于0的，也就是除了第一个所有的div；css方法可以直接变化所有，不需要遍历
//$("div:gt(0)").css("background-color","red");
//选择下标小于3的，也就是前三个div
$("div:lt(3)").css("background-color","red");
})
})
</script>
</head>
<body>
<div>我是div1</div><br>
<div>我是div2</div><br>
<div>我是div3</div><br>
<div>我是div4</div><br>
<div>我是div5</div><br>
<div>我是div7</div><br>
<div>我是div8</div><br>
<input type="button" value="功能按钮"/>
</body>
</html>
这里将上面的按钮的注册方式由行间注册变为JQuery注册；
注意几个点：
- 这里获取对象的方式式选择器，选择的所有的对象都会注册上后面的事件
- 前面获取的就是JQuery对象，使用该对象的相关的事件方法即可；例如click()就是Jquery中的方法
JQuery函数
都是同一个函数，少参的是获取；多参的是设置
val() 有参 无参
这个函数可以操作dom对象的value属性；
- 无参形式 $(选择器).val() 读取数组中第一个DOM对象的value属性
- 有参形式 $(选择器).val(value) 对数组中所有的DOM对象的value属性统一赋值为value
text() 有参 无参
操作数组中所有的DOM对象的【文字显示内容属性】
- 无参形式 $(选择器).text() 读取数组中所有DOM对象的文字显示内容，将得到的内容拼接为一个字符串返回 有的时候和value挺类似
- 有参形式 $(选择器).text(value) 对数组中所有DOM对象的文字显示内容进行统一赋值为value
attr() 有value 无
对val、text之外的其他属性进行操作都是用attr
- 无参形式 $(选择器).attr(“属性名”) 获取DOM数组第一个对象的对应属性的属性值
- 有参形式 $(选择器).attr(“属性名”,”值“) 对数组中所有DOM对象的对应属性赋值为value
这里来举一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本过滤器</title>
<script src="js/JQuery1.8.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
background-color: aqua;
width:200px;
}
</style>
<script type="text/javascript">
$(function(){//页面加载完毕，获取按钮对象
$(":button").click(function(){
//获取第一个文本框的值
//console.log($(":text:first").val()); //显示我是文本框1
//设置所有的文本框为新值
//$(":text").val("你好，JQuery");
//div没有value属性，只有innerText；所以只能使用text
//获取所有的div内容\
//console.log($("div").text()); 我是第一个div我是第二个div我是第三个div
//获取第一个div的内容
//console.log($("div:first").text());我是第一个div
//为所有的div设置新值
//$("div").text("你好，JQuery");
//获取图片的src属性值
//console.log($("img").attr("src")); img/uiz4.png
//设置图片的src属性值
$("img").attr("src","img/Cfeng官网(已去底).png")
})
})
</script>
</head>
<body>
文本框1：<input type="text" value="我是文本框1" /><br/>
文本框2：<input type="text" value="我是文本框2" /><br/>
文本框3：<input type="text" value="我是文本框3"/><br/>
<br>
<div>我是第一个div</div><br>
<div>我是第二个div</div><br>
<div>我是第三个div</div><br>
<br>
<img src="./img/uiz4.png" height="50px" width="100px"/>
<br>
<input type="button" value="功能" />
</body>
</html>
所以说val()是操作DOM对象的value属性；包括获取和设置； text()是获取没有value属性但是是文字内容的DOM对象，会直接操作数组的所有，所以特定要过滤；attr()是操纵除了这之外的所有的属性；
只有val()和attr()的无参是操作第一个对象🎄 happy new year! 🎉
5390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
