关闭

Jquery Operator DOM

569人阅读 评论(0) 收藏 举报


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
。。。。。。回调函数执行的代码段
});



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:160716次
    • 积分:2470
    • 等级:
    • 排名:第14963名
    • 原创:61篇
    • 转载:156篇
    • 译文:0篇
    • 评论:22条
    最新评论