JavaWeb笔记(2)：JQuery/XML/debug

目录

1、熟悉JQuery(是javascript语言开发的工具，与java无关)

1.1 JQuery引入

1.2 JQuery核心函数（$）

1.3 JQuery对象

1.4 JQuery对象与DOM对象转化

1.5 基本选择器

1.6 层级选择器

1.7 基本过滤选择器

1.8 内容过滤选择器

1.9 属性过滤选择器

1.10 表单过滤选择器

1.11 元素筛选

1.12 属性操作(JQuery)

1.13 DOM的增删改

1.14 JQuery的CSS样式操作

1.15 JQuery动画

1.16 JQuery与原生JS对比

1.17 JQuery中其他的事件处理方法：

1.18 事件的冒泡

1.19 JavaScript事件对象

2、了解XML(可扩展的标记性语言)

2.1 XML命名规则

2.2 XML解析技术

调试

---

1、熟悉JQuery(是javascript语言开发的工具，与java无关)

1.1 JQuery引入

<script type="text/javascript" src="../xxx/xxx.js"></script>
通过上述语句引入JQuery文件

<script typr="text/javasrcipt">
	alert($);
</script>
//通过上述语句，用美元符号测试是否引入成功，若成功则不为空

<script typr="text/javasrcipt">
	$(function(){//表示页面加载完成之后的onload事件，相当于window.onload = function(){}
		var $btnObj = $("#btnId");//表示按id查询对象
		$btnObj.click(function(){//表示绑定单击事件
			alert("JQuery单击事件");
		});
	});
</script>

注：1.必须要先引入JQuery库
	2.$实质上是一个函数
	3.jquery库有源码和压缩后的版本，压缩后的名称为jquery版本号.min.js，一般开发的时候用原库，部署到网站上用min版本会快一些。

1.2 JQuery核心函数（$）

①传入的参数为函数时：$(function);
	表示页面加载完成之后，相当于window.onload = function(){}
②传入的参数为HTML字符串时：
$("<div>" + "<span>div_span1</span>" + "</div>").appendTo("body");
	根据字符串内容创建节点对象
	如果不使用JQuery库的话，需要三步：
	var divObj = document.createElement("div");//创建外部节点
	var textNodeObj = document.createTextNode("xxx");//创建内部节点
	divObj.appendChild(textNodeObj);//绑定节点
③传入的参数为选择器字符串时：
	$("#id属性值");————>id选择器，根据标签id查询标签对象
	$("标签名");————>标签名选择器，根据标签名查询标签对象
	$(".class属性值");————>类型选择器，根据class属性查询标签对象
④传入的参数为DOM对象时：
	会将DOM对象转化为JQuery对象

1.3 JQuery对象

通过JQuery提供的API创建的对象是JQuery对象：$("<h1></h1>");
通过JQuery包装的DOM对象是JQuery对象：$(xxxObj);
通过alert查询出来的【object Object】形式的为JQuery对象
JQuery对象的本质是DOM对象的数组 + JQuery提供的一系列功能函数

1.4 JQuery对象与DOM对象转化

$(DOM对象);————>JQuery对象
JQuery对象[下标];————>DOM对象

1.5 基本选择器

$("#id属性值");————>id选择器，根据标签id查询标签对象
$("标签名");————>标签名选择器，根据标签名查询标签对象
$(".class属性值");————>类型选择器，根据class属性查询标签对象
$("标签名、id属性值、类名等");————>组合选择器，依次查询后一起显示

1.6 层级选择器

$("父元素 后代元素");————>查询父元素下的所有后代元素(子+孙+……)
$("父元素 > 子元素");————>查询父元素下的子元素(只有“子”)
$("前一个元素 + 后一个元素");————>查询紧邻前一个元素的后一个元素
$("元素A ~ 元素B");————>查询“元素A后”与元素A“同辈”的元素B

1.7 基本过滤选择器

$("xxx:first")————>第一个
$("xxx:last")————>最后一个
$("xxx:not()")————>非
$("xxx:gt(index)")————>大于
$("xxx:eq(index)")————>等与
$("xxx:lt(index)")————>小于
$("xxx:animated")————>正在播放动画
$("xxx:not(:animated):last")————>组合样式

1.8 内容过滤选择器

$("xxx:contains('xx')").css("……");————>包含文本"xx"的xxx
$("xxx:empty")————>不包含子元素的xxx
$("xxx:parent")————>包含子元素的xxx
$("xxx:has(.xx)")————>含有class为xx的xxx

1.9 属性过滤选择器

$("xxx[属性]")————>含有指定属性的xxx
$("xxx[属性='xx']")————>含有指定属性且属性等于xx的xxx
$("xxx[属性!='xx']")————>含有指定属性且属性不等于xx或不含有该属性的xxx
$("xxx[属性*='xx']")————>含有指定属性且属性包含xx的xxx
$("xxx[属性^='xx']")————>含有指定属性且属性以xx开头的xxx
$("xxx[属性$='xx']")————>含有指定属性且属性以xx结尾的xxx
$("xxx[属性][属性='xx']")————>组合过滤样式

1.10 表单过滤选择器

:input————>表单内的输入项input
:text————>表单内的type="text"
:password————>表单内的type="password"
:radio————>表单内的type="radio"，单选框
:checkbox————>表单内的type="checkbox"，复选框
:submit————>表单内的type="submit"
:image————>表单内的type="image"，不常用
:reset————>表单内的type="reset"，重置
:button————>表单内的type="button"，按钮
:file————>表单内的type="file"，文件域
:hidden————>表单内的不可项，包括type="hiden"和style="display:none;"

表单对象属性
:enabled————>可编辑内容
:disabled————>灰色的不可编辑部分(disabled="disabled")
:checked————>匹配选中的元素，一般指单选、复选框等
:selected————>匹配所有选中的option元素
在对表单项进行遍历操作的时候，如果使用老式的遍历方法，需要先获取DOM对象数组为JQuery对象，然后使用for循环进行遍历，想要取出其中的值，需要使用$xxx[i].value；使用JQuery提供的遍历方法的话，首先仍然要获取JQuery对象，之后可以通过：$xxx.each(function(){执行语句})方式进行遍历，执行语句中可以用this来便捷替代$xxx[i]

1.11 元素筛选

eq()————>获取给定索引的元素，与:eq()相似
first()————>获取第一个元素，与:first()相似
last()————>获取最后一个元素，与:last()相似
filter()————>获取满足指定条件过滤后的结果
is()————>判断是否符合给定的选择器，只要有一个匹配就返回true
has()————>返回包含有匹配选择器的元素的元素，与:has()相似
not()————>删除匹配选择器的元素，与:not()相似（尚硅谷教程原话为删除，可是并没有涉及到内存删除，只是单纯的显示剔除后的结果）
children()————>返回匹配给定选择器的子元素，与parent > child相似
find()————>返回指定祖先元素后的后代元素，与祖先 后代元素相似
next()————>返回当前元素的下一个兄弟元素，与prev + next相似
nextAll()————>返回当前元素后面所有的兄弟元素，与prev ~ siblings相似  
nextUntil()————>返回当前元素到指定匹配的元素为止的后面元素
parent()————>返回父元素
prev()————>返回当前元素的上一个兄弟元素
prevAll()————>返回当前元素前面所有的兄弟元素
prevUnit()————>返回当前元素到指定匹配的元素为止的前面元素
siblings()————>返回所有兄弟元素(前面和后面的)
add()————>把add匹配到的元素添加到当前jquery对象中

1.12 属性操作(JQuery)

html()  可以设置和获取起始标签和结束标签中的内容，类似DOM中的innerHTML
text()  可以设置和获取起始标签和结束标签中的文本，类似DOM中的innerText
val()   可以设置和获取表单项的value属性值，类似DOM中的value
单独使用样式类似于————>$(":radio").val(["radio1"])
组合样式为————>$(":radio,:checkbox").val(["radio1","checkbox1","checkbox3"])，注意val里面值的位置，顺序可以任意变化，会自动适配

注意：html()和text()的最大的区别在于如果在括号内填"<h1>xxx</h1>"，html()会在原来的基础上将起始标签和结束标签中的内容替换为一级标题，而text()则是替换为文本

attr()可以设置和获取属性值
prop()可以设置和获取属性值
attr("xxx")传一个参数就是获取指定属性值，attr("xxx","xxx")传两个参数就是设置,prop()方法类似
attr()方法可以设置自定义属性，如attr("abc","abcValue")

$(":checkbox").attr("checked")，如果body中不写checked属性的话，这里会返回Undefined，官方认为这是个错误，因此推出了prop()方法，在未编辑checked属性时会返回false，编辑了checked="checked"属性时会返回true，因此，在部分attr()方法返回undefined状态下推荐使用prop方法：
checked、readOnly、selected、disabled

全选、全不选、反选(JQuery)
$("#checkedAllBtn").click(function(){xxx})，xxx部分内容如下：
$(":checkbox").prop("checked",true)————>全选
$(":checkbox").prop("checked",false)————>全不选
this.checked = !this.checked————>反选，each方法遍历完后注意检查是否是满选($(":checkbox[name="xxx"]").length与$(":checkbox[name="xxx"]:checked").length比较)
$(":checkbox[name='items']").prop("checked",this.checked)————>全选/全不选
最后需要将所有复选框绑定单击事件，当全选的时候，对应的全选/全不选状态也会更新

1.13 DOM的增删改

内部插入：
appendTo()  a.appendTo(b)  把a插入到b子元素末尾，成为最后一个子元素
prependTo() a.prependTo(b) 把a插入到b所有子元素前面，成为第一个子元素

外部插入：
insertAfter()  a.insertAfter(b)  得到ba
insertBefore() a.insertBefore(b) 得到ab

替换：
replaceWith() a.replaceWith(b)  用b替换a
replaceAll()  a.replaceAll(b)   用a替换所有的b

删除：
remove()  a.remove();  删除a标签
empty()   a.empty();   删除a标签里的内容，但是标签还在

1.13.1 “从左到右、从右到左”

$("sel01 option:selected").appendTo($("sel02"));————>将选中的添加到右边
$("sel01 option").appendTo($("sel02"));————>将左边的全部添加到右边
左边JQuery对象与右边的交换位置就可以实现“从右到左”

1.13.2 动态添加、删除表格记录

添加记录：
①首先创建一个行标签对象，结构与原表相同但内容为空，如下：
var $trObj = $("<tr>" + "<td>" + "</td>" + "<td>" + "</td>" + "<td>" + "</td>" + "<td>" + "</td>" + "</tr>");————>这边就是创建一个一行四列的“模板”
②获取每一列内的内容并添加到之前创建的对象中，如下：
var name = $("#xxx").val();
"<td>" + name + "</td>"

删除记录：
①给a标签绑定单击事件：
通过return false;阻止a标签的默认行为————>网页跳转
通过confirm()方法提示用户是否确认删除，返回值为true或false————>if(confirm("你确定要删除xxx吗？"))(通过a标签.parent().parent()方法找到对应的行对象)
通过行对象.remove方法删除指定行，如下：
$(function(){
	$("a").click(function(){
		var $trObj = $("a").parent().parent();
		
		var name = $trObj.find("td:first")
		
		if(confirm("你确定要删除[" + name + "]吗？")){
			$trObj.remove;
		}

		return false;
	});
});
②给新增的行记录中的a标签补绑一个单击事件：
$trObj.find("a").click(function(){
	中间代码与上面①中步骤相同，这里主要是有一个补绑的过程，之前的绑定是在页面加载完成之后绑定的，因此添加记录之后的a标签是没有进行绑定过的。
});
③如果需要简化代码，减少冗余，可以将重复代码段封装为函数，但是需要注意“this”问题，this具有“就近”属性：如果放在$("a").click(function(){封装函数})会导致this获取到的并不是鼠标点击的对象，经过函数调用后变为当前窗口对象了，因此需要改为$("a").click(xxx)，且不需要加括号！

1.14 JQuery的CSS样式操作

addClass()     添加样式
removeClass()  删除样式
toggleClass()  有就删除，没有就添加样式
offset()       获取和设置元素的坐标

设置坐标的格式为：$xxx.offset({
	top:xx;
	left:xx;
});设置的坐标是根据当前屏幕大小设置的！

1.15 JQuery动画

show();    将隐藏的元素显示
hide();    将可见的元素隐藏
toggle();  可见就隐藏，隐藏就可见
以上动画方法都可以添加参数：
①第一个参数是动画执行的时长，以毫秒为单位
②第二个参数时动画的回调函数(动画完成后自动调用的函数function(){xxx})
③toggle()方法在回调函数中调用自身即可实现动画循环播放

fadeIn();      淡入
fadeOut();     淡出
fadeTo();      在指定时长内慢慢的将透明度修改到指定的值(0透明，1完全可见，0.5半透明)，这个参数写在动画执行时间和回调函数中间，如：$xxx.fadeTo(2000,0.5,function(){xxx});
fadeToggle();  淡入/淡出切换

1.15.1 品牌展示(点击展开xxx)

①通过对a标签绑定单击事件实现菜单的展开和合上-toggle()
②通过is(":hidden")判断状态从而修改"按钮"的内容
③通过removeClass()方法清除原来的箭头角标，通过addClass()添加指定的角标图案
④通过class方法设置推荐样式，尽量不要直接使用style属性设置样式，通过$(":contain('xxx')").addClass("xxx")设置高亮

1.16 JQuery与原生JS对比

①$(function(){});和window.onload = function(){}的区别
	(1)JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
	(2)原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
②他们触发的顺序？
	(1)JQuery页面加载完成之后先执行
	(2)原生js的页面加载完成之后
③他们执行的次数？
	(1)原生js的页面加载完成之后，只会执行最后一次赋值函数，会覆盖之前的操作
	(2)JQuery的页面加载完成之后，会依照注册的顺序，全部执行

1.17 JQuery中其他的事件处理方法：

click()      他可以绑定单击事件，以及触发单击事件
mouseover()  鼠标移入事件
mouseout()   鼠标移出事件
bing()       可以给元素一次性绑定一个或多个事件$("xx").bind("事件1 事件2",function(){xxx})
one()        使用上和bind()一样，但是响应一次之后就结束了
unbind()     和bind方法相反的操作，解除事件的绑定，不传任何参数时默认解除所有绑定事件
live()       可以用来绑定事件，它可以用来绑定选择器匹配的所有元素的时间。哪怕这个元素是后面动态创建出来的也有效

1.18 事件的冒泡

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应：如父子元素同样绑定了单击事件，由于子元素在父元素内部，当点击了子元素会触发子元素绑定的单击事件，同时也会触发父元素的单击事件，即事件的冒泡，更重要的是要掌握事件冒泡的阻止方法：在子元素事件函数体内，return false;

1.19 JavaScript事件对象

事件对象，是封装有触发的事件信息的一个javaScript对象。我们重点关心的是怎么拿到这个javaScript的事件对象。

如何获取js事件对象呢？
在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，参数名习惯上取为event。这个event就是js传递事件处理函数的事件对象。

①原生js获取事件对象
window.onload = function(){
	document.getElementById("areaDiv").onclick = function(event){
		console.log(event);
	}
}

②JQuery代码获取事件对象
$(function(){
	$("#areaDiv").click(function(event){
		console.log(event);
	})
})

③举例应用：当bind同时对多个事件进行绑定时，可以通过event.type获取绑定事件的具体类型从而具体问题具体分析

1.19.1 图像跟随

①给图片绑定mouseover、mouseout事件
②根据event.type设置鼠标移入时显示show()大图片，移出时隐藏hide()
③通过想要让其跟随的图片.offset()方法设置图片跟随，
其中left和top分别设置为event.pageX + 10和event.pageY + 10,

注意：需要设置点裕量，不然鼠标从左上往右下滑动时图片鼠标会离开原图进入跟随图片区域，
函数会判定离开图片区域，执行mouseout逻辑，隐藏跟随图片后，
鼠标又进入图片区域，执行mouseover及跟随逻辑，现象为跟随图片一直闪烁

2、了解XML(可扩展的标记性语言)

①用来保存数据，而且这些数据具有自我描述性
②可以作为项目或模块的配置文件
③可以作为网络传输数据的格式(现在主要都用JSON)

<?xml version="1.0" encoding="utf-8">————>xml文件的声明，版本号和文件编码
<books>
	<book sn="SNxxxxxxxx">
		<name>xxx</name>
		<anthor>xxx</anthor>
		<price>xxx</price>
	</book>	
</books>

用以上方式来存储数据

2.1 XML命名规则

• ①名称可以含字母、数字以及其他的字符(中文也可以)
• ②名称不能以数字或者标点符号开始
• ③名称不能包含空格
• ④必须包含根元素，即没有父标签的唯一一个顶级元素
• ⑤XML属性值必须用引号引起来
• ⑥特殊字符："<"————>"lt;"  ">"————>"gt;"
• ⑦文本区域(CDATA区)

    <![CDATA[这里可以把输入的字符原样显示，不会解析XML]]>

2.2 XML解析技术

• DOM(w3c组织制定)
• SAX(Simple API for XML;sun公司;读一行解析一行，不会产生大量的DOM对象)
• 第三方：
  •  ①jdom对dom进行了封装
  •     ②dom4j对jdom又进行了封装
  •     ③pull主要用于android手机开发，跟sax类似
• dom4j是第三方技术，需要去dom4j官网下载jar包，解压后的dom4j-x.x.x.jar即是目标，多参考docs文件夹下的index.xml里面的Quick start
• 主要作用就是将XML文件中的标签语言通过dom4j这个API转化为Java类、对象

3、调试

1.当运行时没有任何提示的时候，一般是有Bug存在，在编辑界面右边有红色标识，或者在运行界面按F12可以进行调试
2.控制台打印：console.log();

参考：【JavaWeb】学习笔记（前端部分）_m0_53488817的博客-CSDN博客_尚硅谷javaweb笔记