jQuery——样式、元素属性、文本、节点、事件相关操作

操作页面的样式（与js相比没有只能行内样式的限制）

//样式为行内样式 //首先获取要操作的元素对象 var div=$("#div");   //获取元素样式 div.css("width");   //操作所获取元素对象的样式 div.css("width","300px");   //当操作样式多个时，可以使用json div.css({"width":"300px","heigth":"300px"});

 

 

 

//样式单独写了出来，通过添加class类操作样式 //首先获取要操作的元素对象 var div=$("#div");   //操作所获取元素对象的样式 div.attr("class","div");   或   div.addClass("div");

 

 

 

 

 

 

 

 

$(function(){   //加载     $("#but").click(function(){   //给按钮绑定单击事件       $("#div1").attr("class","div");       $("#div1").addClass("div");    }) }) 使用场景：要操作的样式比较多的时候

$(function(){   //加载     $("#but").click(function(){   //给按钮绑定单击事件       Var div=$("#div1");//获取div       div.css("width","300px");     }) }) 使用场景：要操作的样式比较少的时候

 

操作页面的元素属性

获取元素属性

<input id=”inp1” value=’123’ type=’text’ class=”d1”/>       $("#inp1").attr("type")     $("#inp1").attr("value ")     $("#inp1").attr("class ")   所得结果是type,value,class的属性值：text 123 d1 ps:使用val也可以获得属性值：$("#inp1").val()   区别：attr("value")获得的是value的默认值（value在html文件中写的值）            val()获得的是value实时的值（用户在浏览器页面输入的值）

 

 

 

 

 

 

 

操作元素属性

//获取要操作的元素 var div=$("#div"); //操作元素属性 div.attr("type","button"); div,attr("value","123");   以上两句可用json格式：div.attr({"type":"button","value":"123"});   情况1：attr("checked")和prop("checked") 比如有个多选框，想要检测是否勾选 attr("checked")：得到的是checked属性里的值，所以还需if判断;     prop("checked"):得到的是布尔值true/false

 

 

 

 

 

 

 

操作页面的文本

html()类似于js中innerHTML,text()类似于js中innerText;(所以html(),text()和innerHTML,innerText一样用于双标签，但是select和textarea除外)

val()相当于js中的value   (单标签)

获取文本： <span>你好</span> div.html();   获取含有html的元素内容     结果：<span>你好</span> div.text();    获取元素内容  不含html      结果：你好   操作文本： html():会识别html代码，给文本加上html代码中的样式；如果html("<b>你好</b>"); 则结果是   你好 text():不会识别html代码，如果text("<p>你好</p>"); 则结果是  <b>你好</b> val()：是在单标签的时候使用，获取文本框中的值   假设获取了元素对象为div div.html("<b>你好</b>");        等价         div.innerHTML="<b>你好</b>";   以上操作是覆盖原有值，想要累加：div.text(div.text+"你好");

 

 

 

 

 

 

 

 

 

元素操作（节点操作）

创建一个新节点：var p=$("<p>新节点</p>")；

子元素： $("#div1").append(p)；   或    p.appendTo("#div1"); 现有元素后加入p                  p加入现有元素后   append----appendTo      现有元素之后 prepend----prependTo   现有元素之前

平级元素： $("#div1").before(p);     或   p.insertBefore("#div1"); 现有元素前加入p                   p加入现有元素前   before----insertBefore   现有元素之前 after----insertAfter         现有元素之后

替换： $("div p:nth-child(5)").replaceWith(p);     或   replaceAll("div p:nth-child(5)") 某个元素被p替换                           替换div下下标为5的p元素     删除： $("#div1").remove(); 清空： $("#div1").empty(); 删除是将节点删除，也就是节点不存在了；而清空是将节点内容清空，但是节点还在

 

 

 

 

 

 

 

 

 

 

 

 

 

 

事件操作

jQuery方法声明：

$(function(){

})

jQuery(function(){

})

完整：$(document).ready($(function(){

}))

 

绑定事件：

$(function(){   //加载

    $("#div").click(function(){

    })

})

bind:同时绑定多个事件，可用json

$(function(){   //加载

    $("#div").bind({

         click:function(){},

         dblclick:function(){}

    })

})

one:事件执行一次后，就取消了事件

$(function(){   //加载

    $("#div").one('click',function(){

   

     })

})

trigger:事件中调用其他事件

$(function(){    $("#btn").click(function(){        $("#btn1").trigger("dblclick");   }) })

unbind:解绑事件

 

//解绑所有事件 $(function(){    $("#btn").click(function(){        $("#btn1").unbind();    }) })

//解绑单个事件 $(function(){    $("#btn").click(function(){        $("#btn1").unbind("dblclick");    }) })