jQuery常用dom操作

操作属性节点(type属性不支持修改和删除)

  1. attr(‘name‘)——取值(如果jq对象是多个,则只取得第一个值,例如:$(‘.class‘).attr(‘name‘)——只获得第一个class的name属性值)
  2. attr(‘name‘,‘value‘)——赋值
  3. 如果参数是json对象,那么则会同时修改多个属性值,例如:var kv = {name:‘username‘,value:‘tom‘}; $(‘#username‘).attr(kv);
  4. 还可以通过函数的返回值来修改属性值,例如:$(‘#username‘).attr(‘name‘,function(){return ‘tom‘})
  5. 删除属性:$(‘input‘).removeAttr(‘id‘);

操作class——可以使用attr()(方法1)替代

  1. $(‘div‘).attr(‘class‘,‘class‘);
  2. addClass()  为节点设置class属性
  3. removeClass()  删除节点的class属性值
  4. toggleClass()  操作class属性有开关效果(有就删除,没有就添加)

val()方法——可以获取或取得节点的value属性,可以使用attr()方法替代。

html()方法:替换innerHTML(非w3c标准)的使用,html()符合w3c标准

  1. $("#id").html()——获取#id下面所有的子节点的html内容
  2. $("#id").html(‘<p>你好!世界</p>‘)——替换#id下面所有的子节点的html内容

text()方法:用法与html()类似,不同的是用html()赋值时,在浏览器会把html标签正常解析,而text()则会把html标签转化成字符实体,在网页上可见,取值的时候,text()只取文本内容,忽略html标签。

css()方法——设置节点样式(用法于attr()方法类似,操作样式属性)

快捷设置宽和高$(‘#id‘).height(100)——$(‘#id‘).width(100)(可用css方法替代,$(‘#id‘).css(‘height‘,‘100px‘))

jQuery常用dom操作

时间: 2024-10-13 17:15:21

jQuery常用dom操作的相关文章

第3章 jQuery的DOM操作

一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获取属性:elem.getAtrribute('title') 2.html-DOM document.div elem.src 3.CSS-DOM elem.style.color='red' 二. jQuery的DOM操作 1.查找节点 (1)元素节点 1 2 alert($('ul li:eq(

js,jQuery和DOM操作的总结(二)

jQuery的基本操作 (1)遍历键值对和数组 var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age"

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

js常用dom操作

利用dom获得页面元素节点 a) document.getElementById()    //id获得元素节点对象 b) document.getElementsByTagName()   //html标签获得元素节点对象(数组) c) document.getElementsByName(); //常用于表单(数组) 属性判断当前节点类型nodeType a)        1  元素节点 b)        2  属性节点 c)        3  文本节点 d)        9  文档

jQuery进行DOM操作记录

1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuery 为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下: $("#1").append("input type='button' value='确定'/>")   在1的内部元素的后面添加一个按钮 $("#1")

Jquery的dom操作与原生dom的转换

本片文章包含了 jquery常见dom操作. q与原生dom对象的区别与转换 伪数组对象的知识 如有错误,烦请指正. 增 以下方法共性:可以一次添加多个内容,内容可以是DOM对象.HTML string. jQuery对象 创建元素 var obj = $('<div class="test"><p><span>Done</span></p></div>'); 两种方法可以创建元素 直接写入html 传入一个原生d

Jquery所有Dom操作汇总

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> </head>

jQuery之常用DOM操作(一)

DOM操作分主要为三种,DOM Core,HTML-DOM和CSS-DOM 查找节点 查找元素节点 主要通过jQuery的选择器来查找元素节点 查找属性节点 在查找到元素节点之后可以使用attr()来查找或设置对应节点的属性 创建(子)节点 使用$(html标签代码字符串)创建一个节点,然后再使用下面的方法来插入节点;同时下面的方法也可以移动原有的元素节点 append()向每个匹配的元素内部追加内容 appendTo()把所有匹配的元素追加到指定的元素中 prepend()向每个匹配的元素内部

jquery的 dom操作

DOM(文档对象模型),DOM操作分3类: DOM-core(核心)  HTML—DOM    CSS—DOM DOM—core ,js中的 : document.getElementById()         document.getElementsByTagName()        document.getElementsByName();  getAttribute()    setAttribute(); HTML—core: CSS—core :获取和设置style对象的各种属性