Jq中的DOM操作
DOM基础：DOM操作分为3类，分别是DOM core,HTML-DOM，CSS-DOM.
DOM core:其并不专属于js,任何一种支持DOM的程序语言都可以使用它，它的用途并非只限于处理网页，也可以处理任何一种使用标记语言编写出来的文档，例如XML。
例如，js中的getElementById(),getElementByTagName(),getAttribute(),setAttribute()
HTML-DOM:只能用来处理web文档，例如document.forms ,element.src
CSS-DOM:针对CSS,主要作用是获取和设置style对象的各种属性，例element.style.color=”red”
| 功能 | 具体 | 示例 | ||||||||
| 查找节点 | 查找元素节点 | var $li=$(“ul li:eq(2)”) //获取ul中的第二个li节点 | ||||||||
| 查找属性节点 | var p_txt=$(“p”).attr(“title”)//获取p元素的title属性 | |||||||||
| 创建节点 | 分为创建和将新元素插入文档2个步骤，创建使用jq中的工厂函数$()完成 | |||||||||
| 创建元素节点 | var $li=$(“<li></li>”) | |||||||||
| 创建文本节点 | var $li=$(“<li>香蕉</li>”) | |||||||||
| 创建属性节点 | var $li=$(“<li title=”香蕉”>香蕉</li>”) | |||||||||
|
| Html代码：<p>我想说</p> | |||||||||
| 插入节点 | append() | 向每个匹配的元素内部追加内容 $(“p”).append(“<b>您好</b>”) | ||||||||
| appendTo() | 将所有匹配元素追加到指定的元素中 $(“<b>您好</b>”).appendTo(“p”) | |||||||||
| prepend() | 向每个匹配的元素内部前置内容 $(“p”).prepend(“<b>您好</b>”) | |||||||||
| prependTo() | 将所有匹配元素前置到指定的元素中 $(“<b>您好</b>”).prependTo(“p”) | |||||||||
| after() | 向每个匹配的元素之后插入内容 $(“p”).after(“<b>您好</b>”) | |||||||||
| insertAfter() | 将所有匹配元素插入到指定的元素后面 $(“<b>您好</b>”).insertAfter(“p”) | |||||||||
| before() | 在每个匹配元素之前插入内容 $(“p”).before(“<b>您好</b>”) | |||||||||
| insertBefore() | 将所有匹配元素插入到指定的元素前面 $(“<b>您好</b>”).insertBefore(“p”) | |||||||||
| 删除节点 | remove() //可传递参数，例 $(“ul li”).remove(“ Li[title!=apple]”); | 当某个节点使用remove()该节点包含的所有后代节点将同时被删除，这个方法的返回值是指向那个被删除的节点的引用; Detach()和remove()两者的共同之处在于都不会把匹配的元素从jQuery对象中删除。 不同之处在于用remove()删除的元素，除了元素被保留，其他的在这个元素上的绑定事件等都会被移除，但是detach()方法不会移除这个元素上的方法或者是附加数据。 empty()是清空节点，清空元素中的所有后代节点，但它本身还在 | ||||||||
| detach() | ||||||||||
| empty() | ||||||||||
| 复制节点 | clone()//复制节点 clone(true)//复制节点及节点上的行为 | 例：$(“ul li”).click(function(){ $(this).clone().appendTo(“ul”); })复制当前单机的几点，并将它添加到ul元素中 | ||||||||
| 替换节点 | A.replaceWith(B) //A被B替换 C.replaceAll(D) //用C去替换D | $(“p”).replaceWith(“<strong>来吧</strong>”) $(“<strong>来吧</strong>”).replaceAll(“p”) | ||||||||
| 包裹节点 | wrap() wrapAll() wrapInner() | 功能：将某个节点用其他标记包裹起来，三者区别： wrap()是将所有的元素进行单独包裹，wrapAll()是将所有匹配元素用一个元素进行包裹，所以若被包裹的多个元素间还有其他元素，其他元素会被放到包裹元素之后，wrapInner将每一个匹配的元素的子内容（包括文本节点）用其结构化的标记包裹起来 例 $("strong").wrapAll("<i></i>") | ||||||||
| 属性操作 | attr()//获取和设置元素属性 removeAttr()//删除 | $(“p”).attr();//获取 $(“p”).attr(“title”,”you”);//设置 $(“p”).attr({“title”:”you”,”name”:”yang”}); //设置多个属性 $(“p”).removeAttr(“title”)//删除 | ||||||||
| Jq中有很多方法都是同一个函数实现获取和设置的，类似的还有html(),text(),height(),width(),val(value),css()等方法 | ||||||||||
| 样式操作 | attr()//获取设置 addClass()//追加 removeClass()/移除 toggleClass()//切换 hasClass()//判断是否含有 | 实质是对元素的class属性进行操作 例：<p class=”myClass”>aaa</p> $(“p”).attr(“class”)//获取 $(“p”).attr(“class”,”high”)//将原来的类替换成新的类high，相应的样式也被更改 $(“p”).addClass(“another”)//追加了another样式，p的样式变为 myClass another,当某个元素拥有2个样式时，有以下2个规定：（1）一个元素添加了多个样式是，相当于合并了他们的样式（2）如果有不同的class设定了同一个样式属性，则后者覆盖前者。 $(“p”).removeClass(“another”)//删除该样式 $(“p”).removeClass(“ myClass another”)//删除多个 $(“p”).removeClass()//删除p元素的所有class $(“p”).toggleClass(“another”)//转换，原理：如果类名存在则删除它，如果不存在则添加它 $(“p”).hasClass(“another”)//某元素含有则返回true,否则返回false | ||||||||
| 设置获取html 文本和值 | html() Text() Val() | //类似于js中的innerHTML，获取设置 //类似于js中的innerText, //类似于js中的value,获取设置,val()还可以时select,checkbox,radio相应的项被选中 | ||||||||
| 遍历节点 | children() next() prev() siblings() closet() | //只考虑子元素，不考虑其他后代元素 //用于取得匹配元素后面紧邻的同辈元素 //用于取得匹配元素前面紧邻的同辈元素 //用于取得匹配元素前后所有的同辈元素 //取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回元素本事，如果不匹配，则向上查找父元素，逐级向上直到找到匹配选择器的元素，如果都没找到则返回一个空的jq对象（不太理解）
| ||||||||
| ||||||||||
| CSS-DOM | 举几个常用的例子 关于元素定位; offset()
position() | 设置透明度$(“p”).css(“opacity”,”0.5”);
//获取元素在当前视窗的相对偏移，返回的对象包括top,left两个属性 //获取元素相对于最近的一个position样式属性设置为relative,或absolute的祖父节点的相对偏移，同样，返回对象有top和left两个属性 | ||||||||
示例：输入邮箱，默认提示语的更改
Html:<input type="text" id="address" value="请输入邮箱地址" /><br/>
<input type="text" id="password" value="请输入密码" /><br/>
<input type="button" value="登录" />
Jq实现：//这里可以用表单元素的defaultValue属性来实现相同功能
//txt_value=="请输入邮箱地址"等同于txt_value==this.defaultValue
$("#address").focus(function(){
var txt_value=$(this).val();
if(txt_value=="请输入邮箱地址"){
$(this).val("");
}
});
$("#address").blur(function(){//失去鼠标焦点事件
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("请输入邮箱地址")
}
});
$("#password").focus(function(){
var txt_value=$(this).val();
if(txt_value=="请输入密码"){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value=$(this).val();
if(txt_value==""){
$(this).val("请输入密码")
}
});
(5)jq的事件
$(document).ready(function(){})的简写形式：$(function(){}) 或者$().ready(function(){})//$()不带参数时，默认参数是“document”
5-1 事件绑定：为某元素绑定事件来完成某些操作，使用bind()方法来对匹配元素进行事件绑定，格式如下：
bind(type[,data],function)//3个参数
参数一是事件类型，如blur,focus,load,click等（可以发现，jq中的事件绑定类型比js中事件绑定类型少了”on”）；参数二为可选参数，作为event.data属性值传递给事件对象的额外数据对象；参数三是用来绑定的处理函数。例：
$(function(){
$(“#panel h5.head”).bind(“mouseover”,function(){
$(this).next().show();
}).bind(“mouseout”,function(){
$(this).next().hide();
});
});
简写绑定事件：
$(function(){
$(“#panel h5.head”).mouseover(function(){
$(this).next().show();
}).mouseout (function(){
$(this).next().hide();
});
});
5-2合成事件
Jq中有个合成事件--hover()和toggle(),这都属于jq自定义的方法。
hover的语法--hover(enter,leave);//该方法用于模拟光标悬停事件，当光标移动到元素上，会触发指定的第一个函数（enter）,当光标移出这个元素时，会触发第二个函数（leave）.
Toggle(fn1,fn2,..fnN)//用于模拟鼠标单击事件，随着每次单机，重复对这几个函数进行轮番调用。
5-3 事件冒泡
事件冒泡：事件会按照DOM的层次结构像水泡一样不断向上直至顶端。
事件对象：由于ie-DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件对象比较困难，针对这个问题，jq进行了必要的扩展和封装，从而使得在任何浏览器中都能轻松的获得事件对象及事件对象的一些属性。
在程序中，使用事件对象非常简单，只需要为函数添加一个参数，jq代码如下：
$(“element”).bind(“click”,function(event)){});
当单机“element”这个元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，当事件处理函数知行完毕后，事件对象就被销毁。
停止事件冒泡：
阻止事件中其他对象的事件处理函数被执行，jq中使用stopPropagation()方法停止事件冒泡。
例：$(“span”).bind(“click”,function(event)){
。。。。。。。。。。。//其他操作
event.stopPropagation();//阻止冒泡
});
阻止默认行为：jq中提供了preventDefault()方法来阻止元素的默认行为。（单击超链接跳转，单击“提交”表单会提交等默认行为）
例：单击“提交”验证表单内容，例如某元素是否为必填字段，当表单不符合提交条件时，要阻止表单的提交。
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username=$("#username").val();
if(username==""){
$("#msg").html("<p>文本框的值不能为空</p>");
event.preventDefault();
}
});
});
</script>
<form action="index.html">
用户名：<input type="text" id="username"/>
<input type="submit" value="提交" id="sub" />
</form>
<div id="msg"></div>
如果同时对事件对象停止冒泡和默认行为，可以在事件函数中返回false
例：event.stopPropagation()和event.preventDefault()都可以改为return false;
事件捕获：与事件冒泡相反，并非所有的浏览器都支持事件捕获，这个缺陷无法通过js来修复。Jq中不支持事件捕获，如果想使用，请用原生js实现。
事件对象的属性：
（1）event.type //获取事件类型
（2）event.stopPropagation() //阻止事件冒泡
（3）event.preventDefault() //阻止事件默认行为
（4）Event.target //获取触发事件的元素
（5）event.relatedTarget
在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的。event.relatedTarget在mouseover中相当于IE浏览器中的event.fromElement,在mouseout中相当于IE浏览器的event.toElement，jq对其进行了封装，使之能兼容各种浏览器。
（6）该方法是获取光标相对于页面的x和y坐标，如果没有jq，那么IE浏览器是使用event.x/event.y，而在火狐浏览器中是使用event.pageX/event.pageY。如果页面上有滚动条，则还要加上滚动条的宽度或高度。
（7）event.which
该方法是在鼠标单击事件中获取鼠标的左，中，右键，在键盘事件中获取键盘的按键。
$("a").mousedown(function(e){
alert(e.which);//1-鼠标左键，2-鼠标中键，3-鼠标右键
return false;
});
$("input").keyup(function(e){//获取键盘的按键
alert(e.which);
return false;
});
移除事件：unbind([type],[data]);
第一个参数是事件类型，第二个参数是要移除的函数，具体说明如下：
（1）如果没有参数，则删除所有绑定的事件；
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。（当然这个的前提是需要为这些匿名处理函数指定一个变量，例$(“#btn”).bind(“click”,myFun1=function(){})）
另外，对于只需要触发一次，随后就要立即解除绑定的情况，jq中提供了一种简写方法---one(),one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除，即在每个对象上，事件处理函数只执行一次，语法结构：One（type,[data],fn）;
模拟操作：
1-常用模拟: 以上例子都是用户通过单击按钮，才能触发click事件，但在有时，需要通过模拟用户操作，来达到单击的效果，例：当用户进入页面后，就触发click事件，而不用用户主动单击。在jq中，使用trigger()方法完成模拟操作，例如使用下面的代码触发id为btn的按钮的click事件$(“#btn”).trigger(“click”); 这样当页面加载完毕后，就会立刻输出想要的效果，也可以简化成 $(“#btn”).click();
2-触发自定义事件：不仅可以触发浏览器支持的具有相同名称的事件，也可以触发自定义名称事件。
例为元素绑定一个“myClick”事件，如下：
$(“#btn”).bind(“myClick”,function(){
$(“test”).append(“<p>我的自定义事件<p>”)});
想要触发这个事件，可以使用下面的代码
$(“#btn”).trigger(“myClick”);
3-关于默认操作
Trigger()方法触发事件后，会执行浏览器默认操作
如果不想执行浏览器的默认操作，可以使用triggerHandler([事件类型])
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
