Jquery Operator DOM

转载 2012年03月24日 13:32:46


Dom 与 Jquery


Jquery命名规范:获取的元素对象  变量名一般以$+变量名
document对象:直接变量名


1)查找节点




2)创建节点
Normal method
var input=document.createElement("input(元素名)");
input.setAttribute("type(属性名)","text(值)");
document.getElementById("shame").append=input;//附加


Jquery method
$("p").append("html元素");
$("<b>hello<b/>").appendTo("p");//将元素附加到哪里
$("p").prepend("html元素");将元素附加到p元素的前面
$("<br>hello</>").prependTo("p");
$("p").after("html元素");//插入兄弟元素
$("<br>hello<br/>").insertAfter("p");//将元素插入到p的后面
$("p").before("html");//将p插入到html元素前面




normal element operator
 
var div=document.getElmentById("sharme");
var br=document.createElement("br");//create element
var input=document.createElement("input");
var button=document.createElement("input");

input.setAttribute("type","file");//set element of attribute


button.setAttribute("type","button");
button.setAttribute("value","sharmeYao");


button.onclick=function(){
div.removeChild(br);//remove child node
div.removeChild("input");
div.removeChild("button");
}
div.appendChild(br);//append child node
div.appendChild(input);//jquery   br.remove();//元素对象实现移除本身




div.appendChild(button);


$("#sharme").append(br).append(input).append(button);//jquery achieve append child nodes














DOM元素用jquery进行复制


    $("ul li").click(function(){//这句代码隐含了一个循环ul节点所有子节点的循环

$(this).clone().appendTo("ul");//将循环的子节点this对象,clone复制一份,然后appendTo指定元素上
    })






替换Dom节点元素


$("p").replaceWith("<div>sharme<div>");//用div这个元素替换当前页面上的所有p元素


$("<div>sharme</div>").replaceAll("p");//用前面的div替换页面所有的p元素






Dom元素的包裹


 $("p").wrap("<a href="www.bugutang.com"></a>");//这里是将p元素包裹起来
内容是<a href="www.bugutang.com"><p>sharme</p></a>//将p这个元素放置到后面<a href></a>元素中


  $("p").wrapInner("a href="www.bugutang.com></a>");//包裹p元素的文本


<p><a href="www.bugutang.com">sharme</a></p>








---------------jquery的 AJAX请求
$.ajax({


type:"get",    //请求方式
url:"sharme.do?method=addTo", //请求的url
dataType:"html/xml/application/json",//响应文本数据格式
success:function(data){//ajax回调函数响应数据
alert(data);
}
});




-----运用jquery  中AJAX方法中的参数来解决get和post请求的问题    注意在访问路径后面拼接参数的方法请求永远都是get的请求
$.ajax({


type:"post",
url:"myServlet",
dataType:"html", //这里的类型不写的话,默认为html
data:{"name":"sharme","sex":"man","age":20},   //这里可以采用json的格式传递参数
success:function(data){
alert(data);
}
});




---------rederect use ajax 直接使用ajax post


$.post("url",{name:parame1,age:parame2},function(returnData,status){
//status表示状态  成功就调用回调函数  成功为2.0
。。。。。。回调函数执行的代码段
});



锋利的Jquery——学习笔记(四)DOM操作(一)

Jquery中的DOM操作(一)
  • Bambi12
  • Bambi12
  • 2017年07月19日 17:36
  • 126

服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)

注* 这是一个两年多的“老”项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经...

jQuery对象和DOM对象的区别与联系

一、什么是DOM对象 所谓DOM,即Document Object Model(文档对象模型),每一个DOM都可以表示成一棵树,请看下面的代码,这是一个简单的网页基本结构。 1 doct...

a毛 jquery 学习记 5 基础DOM和CSS操作1

jquery 学习 五(1) 基础DOM和CSS操作 参考资料:李炎恢老师的视频 、w3cschool  、锋利的jquery、 拷上次笔记到文件夹到'5基础DOM和CSS操作1'中, 一.DOM ...

[知了堂学习笔记] JQuery对DOM的操作

操作分类 节点操作 查找节点 通过选择器 通过属性选择器 通过parent([expr])函数方法来查找父级元素节点 通过parents([expr])函数方法来查找祖先元素 创建节点 $(ht...

JQuery删除DOM节点的方法

如果文档中某一个元素多余,那么应将其删除。JQuery提供了两种删除节点的方法,即remove()和empty()。 HTML DOM结构如下: p class="nm_p" ...

使用Dom以及JQuery两者的转换达成无Id的标签的内容获取

html代码: )"                         class="userInfo">

JQuery 常见DOM操作练习1

1.管理选择器(size()方法)所得的结果 size()方法

jQuery对象与DOM对象之间的转换方法

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。 什么是jQuery对...

jQuery基础(样式篇,DOM对象,选择器,属性样式)

jQuery基础(样式篇,DOM对象,选择器,属性样式)$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery Operator DOM
举报原因:
原因补充:

(最多只允许输入30个字)