jQuery之元素操作及事件绑定

1、操作元素之属性:

  ①attr读:(“selector”).attr(“属性名”);=>getAttribute(“属性名”);改:

(“selector”).attr(“属性名”,值);=>setAttribute(“属性名”,值);*(*无法访问不再开始标签中存在的prop属性;例:checked,selected,disabled);

  ②prop读:(“selector”).prop(“属性名”);=>elem.属性名;改:

(“selector”).prop(“属性名”,值);

  ③移除属性:$(“selector”).removeAttr(“属性名”);=>removeAttribute(“属性名”);

2、操作元素之内容:

  ①html原文:读:(“selector”).html();=>elem.innerHTML;改:

(“selector”).html(“html片段”);=>elem.innerHTML=”html片段”;清空元素:$(“selector”).empty();=>elem.innerHTML=””;

  ②纯文本:读:(“selector”).text();=>elem.textContent/innerText;改:

(“selector”).text(“文本”);

  ③表单元素的value:读:(“selector”).val();改:

(“selector”).val(值);

3、操作元素之样式:

  ①直接操作CSS属性:(“selector”).css(“CSS属性名”);=>getComputedStyle();

(“selector”).css(“CSS属性名”,值);=>elem.style.CSS属性名=值;同时修改多个属性值:$(“selector”).css({属性名1:值1,属性名2:值2,……});*(css()能读取所有属性,但只能修改内联样式,属性名须去横线化驼峰);

  ②修改class属性:a、完整修改:(“selector”).attr(“class”,”类名”);b、追加:

(“selector”).addClass(“类名”);c、移除:(“selector”).removeClass(“类名”);d、清除:(“selector”).attr(“class”,””);或者(“selector”).removeClass();e、判断是否包含:

(“selector”).hasClass(“类名”);f、在有或没有指定类名之间切换:$(“selector”).toggleClass(”类名“);

4、遍历节点:

  ①获得父元素:$(“selector”).parent();=>elem.parentNode;或elem.parentElement;

  ②获得兄弟元素:下一个兄弟(“selector”).next([selector]);=>elem.nextElementSibling;前一个兄弟:

(“selector”).prev([selector]);=>elem.previousElementSibling;其他兄弟:$(“selector”).siblings([selector]);

  ③子元素:直接子元素:(“selector”).children([selector]);所有子代元素:

(“selector”).find(selector);*(find()必须加selector);

5、添加:

  ①创建节点:var elem=

(“完整html元素代码段”);

  ②添加:追加到parent下所有子节点末尾:(parent).append(

elem);作为parent的第一个子节点插入:(parent).prepend(elem);插入到child之后:(child).after(elem);插入到child之前:       (child).before(

elem);

6、其它操作:

  ①删除:$(要删除的元素).remove();

  ②替换:(old).replaceWith(新元素);或

(新元素).replaceAll(old);

  ③复制:var clone=

(“selector”).clone([true]);*(true:为深度克隆包括事件处理函数);

7、事件绑定之bind:

  ①$(…).bind(“事件名”,fn)=>addEventListener;为同一元素的事件处理函数绑定多个函数对象;

  ②$(…).unbind(“事件名”,fn)=>removeEventListener;如果有可能移除事件处理函数,则绑定时必须用实名函数绑定,不能用匿名函数;重载:a、不带任何参数:移除元素上所有事件处理函数绑定;b、只带一个事件名称参数:移除元素上指定事件名称绑定的所有函数对象;c、带两个参数:仅移除事件元素上指定事件名称绑定的执行的函数对象;

8、事件绑定之delegate:

  ①事件代理:让指定父元素下所有符合要求的子元素都能使用事件处理函数(包括生成);原理:利用事件冒泡:a、仅将事件处理函数绑定在父元素;b、获得目标元素:e.target;c、仅响应符合条件的元素的事件;

  ②事件代理使用:将事件绑定到parent上(利用冒泡),只有符合selector条件的元素才能响应事件;(parent).delegate(“selector”,“事件名”,function(e)e.target);移除绑定:

(parent).undelegate(“selector”,”事件名”,function(e){e.target});

9、其它绑定:

  ①一次性事件:$(…).one(“事件名”,fn);只能执行一次事件处理函数,执行后自动解除;

  ②将元素所有事件绑定到document:(…).live(“事件名”,fn);

(…).die(“事件名”,fn);

  ③仅为一个元素绑定事件处理函数:$(“target”).on(“事件名”,fn);

  ④利用冒泡:$(“parent”).on(“事件名”,“selector”,fn);解除绑定off;

时间: 2024-10-14 10:34:40

jQuery之元素操作及事件绑定的相关文章

巧妙使用Jquery 改变元素的 onclick 事件

需要点击图片将套组发布, 页面代码: Html代码   <img width="20px" src=" <s:property value="IMAGES_PATH" /><s:if test='%{releaseStatus == "YES"}'>pubed.png</s:if> <s:else>nopub.png</s:else>" onclick=&quo

jquery的链式操作以及事件绑定

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

jQuery文本框(input textare)事件绑定方法教程

jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接下来为大家介绍下bind的使用方法及input textare事件,感兴趣的朋友可以参考下 (1)jquery 绑定事件 目前1.7以上,jquery的事件绑定已经用on替换了原来的bind: 区别:(个人理解)bind是一次绑定事件到每一个子节点:on是只绑定到父节点,然后冒泡到各个子节点: 用法

jQuery源码分析--event事件绑定(上)

上文提到,jquery的事件绑定有bind(),delegate()和one()以及live()方式.我用的jQuery2.1.3版本,live()已经被废弃了. bind(),delegate()和one()的内部源码. //7491行 bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, //7498行 delegate: function( selector, types, data,

jquery在元素上收购事件

jquery的给元素绑定的事件能够用data方法取出来 通过$(element).data("events")来获取 // 比方给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button会分别弹出 2 和1的a

Jquery table元素操作-创建|数据填充|重置|隐藏行

1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param parentElement html元素,表格插入至此元素中 */ function createTable(label, data, parentElement) { //创建表格 var table = $("<table> </table>"); //也可以为

jquery dom元素操作

jquery 获取父节点,兄弟节点,在节点内插入内容. ①$("#test1").parent() //  父节点 ②$("#test1").next() //下一个节点 ③$("#test1").append('<div class="error_info"><span class="Validform_checktip"></span></div>'); 

JQ动态生成的元素,原事件绑定失效

Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<code>所在的div) $('.container').on("click", "code", function () { console.log($(this).text()); }); 之前只是知道官方推荐使用on来生成事件,并不知道其好处,这次知道了 话说,

Jquery 为元素添加键盘事件

//全局:$(function () {    document.onkeydown = function (e) {        var ev = document.all ? window.event : e;        if (ev.keyCode == 13) {            $("#FormId").submit();        }    }}); //某个控件:$('#id').keydown(function (e) {    if (e.keyCod