jQuery学习笔记之jQuery的DOM操作

一.节点的操作

1.查找节点：

var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点

如：var $ul_1=$("ul");

2.创建并追加节点：

var $var_1=$("<htmltype>");//这句话是创建一个节点

$("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中

例子：var $li_1=$("<li  title="title1">香蕉</li>");

$("ul").append($li_1);

其中插入方法有以下几种：

  • append() 把B追加到A内部（所有的A元素，以下类似）
  • appendTo() 把A追加到B内部
  • prepend() 把B追加到A内部的内容前
  • prependTo() 把A追加到B的内容前
  • after() 在A后追加B
  • insertAfter() 在A前追加B
  • before() 在A前追加B
  • insertBefore()在A后追加B

例子：$("ul").append("<li>你好</li>");//在ul内部追加li

$("<li>你好</li>").appendTo("ul");//在ul内部追加li

3.删除节点

  • remove() 删除该元素
  • empty() 清空节点，包括后代节点

例子：$("ul  li:eq[1]").remove(); //获取ul中的第二个li并删除

$("ul  li").remove(“li[title="菠萝"]”);//删除ul中li元素属性title="菠萝"的元素

4.复制节点

  • clone();//复制本节点

例子：$("ul  li:eq[1]").clone().appenTo("ul");//复制并追加到ul中，只复制是不会显示出来的

5.替换节点

  • replaceWith();//将B替换所有A
  • replaceAll();//将A替换所有B

6.包裹节点

  • warpAll();//用B包裹A
  • warpInner();//用B包裹A的内容

二.属性操作

1.获取和设置属性

var $var_1=$("p");//这句话是获取节点P

var $p_1=$var_1.attr("title");//获取节点P的title属性

var $p_2=$var_1.attr("title","你好");//设置节点P的title属性为"你好"

2.删除属性

$("p").removeAttr("title");//删除节点P的Title属性

三.样式操作

1.获取和设置样式

var $var_class=$("p").attr("class");//获取节点P的class属性

$("p").attr("class","class1");设置节点P的class属性为样式表类class1

2.追加样式

  • addClass() 添加样式到A

例子：$("p").addClass("another");添加样式表类another类到P

3.移除样式

  • removeClass() 移除类

4.切换样式

  • toggleClass() 切换clss属性类为新的类

5.判断某个样式是否存在

  • hasClass()

四.内容的操作

  • html() 该方法获取html元素的内容，如：var var1=$("p").html();//获取P元素内的内容
  • text() 获取或设置某个html元素的内容
  • val() 获取元素的Value值
  • children() 获取html元素的所有子节点
  • next()  获取html元素后紧邻的同辈节点
  • prev() 获取html元素前紧邻的同辈节点
  • siblings() 获取html元素前后紧邻的同辈节点 

五.CSS-DOM技术

  • css("属性"，"值") 设置元素css某个属性的值，如：$("p").css("color","red");//设置P的css属性{color:red;}

赞 (0)

相关推荐

  • jQuery DOM操作小结与实例

    DOM操作的分类:DOM CORE(核心).HTML-DOM和CSS-DOM 1. DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML. Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,都是dom core的组成部分. 2. HTM

  • jquery 操作DOM的基本用法分享

    例子展示: jquery代码: 复制代码 代码如下: <script language="javascript"> $(document).ready(function(){ alert($("ul li:eq(1)").text()); //选取第二个li的值 alert($("p").attr("title")); //选取p的title属性的值 //追加元素 $('ul').append("<

  • js/jQuery对象互转(快速操作dom元素)

    复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);

  • jQuery使用手册之二 DOM操作

    jQuery使用手册之二 DOM操作

    属性我们以<img id="a" scr="5.jpg"/>为例,在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象,在用o.src来取得或修改该节点的scr属性,在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ],然后可以用jQuery提供的很多

  • NodeJS使用jQuery选择器操作DOM

    注* 这是一个两年多的"老"项目,可以让你在NodeJS中使用jQuery的选择器,像操作前端DOM一样操作后端的HTML/XML,在去除浏览器兼容相关代码后,比JSDOM的操作快8倍. 之前我们曾经提到JSDOM有严重的性能问题:   Debug调试Node.JS:我们是如何定位内存泄漏和无限循环的 cheerio 快速,灵活,在服务器端使用的jQuery. 简介 测试你的服务器端HTML: 复制代码 代码如下: var cheerio = require('cheerio'), $

  • jQuery常见面试题之DOM操作详析

    jQuery常见面试题之DOM操作详析

    前言 关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了. 面试题一:JQ中html().text()和val()区别? 面试题二:JQ中find().has()和filter()区别? 面试题三: closet()和parents()区别? 答案请在文中查找... DOM操作有三类:DOM-core.HTML-DOM .CSS-DOM 一.插入节点 我们用的最多的就是append和apendTo,其实共有8种方法. 插入节点 二.删

  • jQuery的DOM操作之删除节点示例

    jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

  • jQuery学习笔记 获取jQuery对象

    使用jQuery选择器选择页面元素,目的是为了生成jQuery对象,语法相当简单:$(selector).但值得注意的是,这是生成jQuery对象,不是DOM对象,因此$(selector).innerHTML以获取元素内部HTML代码是错误的,正确写法是$(selector).html().同样的,判断一个DOM对象是否存在,不能够写成if($(selector)),而是if($(selector).length>0). 当然jQuery对象和DOM对象可以互转换.从上面的例子也可以看出,jQ

  • jQuery学习笔记之jQuery中的$

    在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的"$"作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>

  • jQuery学习笔记之jQuery构建函数的7种方法

    一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象; 复制代码 代码如下: //$(selector[,限制范围])         $(".guo").click(function () {//这里没有context参数             $("a.aguo", this).css({"color":"red"});//this就是context参数

  • JQuery 学习笔记01 JQuery初接触

    一.下载官方网址是http://jquery.com/官方下载地址:http://docs.jquery.com/Downloading_jQuery里边有当前版本和历史版本的下载,可以下载下来部署在自己的服务器上上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的广泛使用,选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源.官网上下载有两种版本Compressed(Minified ver

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • jquery学习笔记 用jquery实现无刷新登录

    好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录. 首先先创建html的部分 复制代码 代码如下: <table> <tr> <td> 用户名: </td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td> 密码: </td> <td> &

  • jQuery学习笔记之jQuery的事件

    一.事件绑定 1.事件绑定函数 事件的绑定函数为如下形式: .bind(type [,data],fn) type:类型 如click..... data:参数 fn:事件执行的函数 例子 复制代码 代码如下: $(function(){ $(#id1).click(function(){ $(#id2).show();//id2显示 }) ; }); 二.合成事件 1.鼠标滑过事件 .hover(enter,leave) enter:鼠标光标移动到对象时触发的函数 leave:鼠标光标移出对象

  • jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路

    花了一晚上的时间解决了一个看似很容易的问题.今晚做的这个东西中由于要获取某列中的一个ID值.如果是用平常的那种JS传值的方式此问题就不存在,但是由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得. 网上找了很多方法,用起来都不行,后来想到了jquery中的鼠标事件,可以在鼠标经过table时,获得当前行与列的值.页面如下所示:  具体操作就是点击"删除"按钮,然后调用jquery插件页面,这时候需要获得相应行的"ID"

  • jQuery学习笔记 更改jQuery对象

    jQuery代码的任务就是生成jQuery对象A,操作jQuery对象A:生成jQuery对象B,操作jQuery对象B--但是若此过程中,对象A.B--之间有某种关系,那么完全没必要一个个去$(selector),这很繁琐的.因此jQuery提供了一些方法,使流程变为生成jQuery对象A,操作jQuery对象A:更改为jQuery对象B,操作jQuery对象B-- 一个jQuery对象,既要进行N次操作,又要进行M次更改.因此有必要将生成的jQuery对象存储在一个变量中,多次调用.然而,试

随机推荐