jQuery简单入门(二)

2.Dom操作



A.DOM分类

个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识;

  aa.DOM Core

  bb.HTML -DOM

  cc. CSS-DOM



B.jQuery操作DOM

  aa.操作节点

    1.查找节点

      1.1.查找元素节点:

      $(“input”).val();//获取input元素的数值

      $(“form input:eq(1)”).val();//获取form元素的第2个input子元素的数值

      1.2.查找属性节点:

      $(“input”).attr(“value”);//获取input元素的value属性的值

    2.创建节点

      2.1.创建元素节点:

      $(“form”).append(“<input type=”text” />”);//动态创建<input>元素节点并添加到<form>中

      2.2.创建文本节点:

      $(“form”).append(“<h5>动态创建”<h5>”文本节点</h5>”);

      2.3.创建属性节点:

      $(“ul”).append(<li title=”属性节点”></li>);

    3.插入节点

    参考创建节点实例(注:jQuery提供多种插入节点方法如:append(), appendTo, after()...)

    4.删除节点

      4.1.使用remove()    (注:当某个节点被remove掉,那么他的子代节点也同时被remove掉)

      $(“ul li”).remove();//删除掉ul元素的所有li子元素

      4.2.使用detach()    (注:该方法删除的节点,如果再次添加会该节点,则删除之前所绑定的事件依旧生效)

      $(“ul li”).detach();

      4.3.使用empty()  (注:该方法是清空掉元素里的内容)

      $(“ul li”).empty();//清空ul元素的子元素li的内容,如:文本值

    5.复制节点(clone())

      5.1.$(“ul li”).clone().appendTo(“form”);//复制ul元素的子元素li并把他添加到form元素中

      5.2.$(“ul li”).clone(true).appendTo(“form”);//复制ul元素的子元素li并把他添加到form元素中,并且原本在被复制元素中具有的事件方法,在新元素中同样有效

    6.替换节点(replaceWith()、replaceAll())

      6.1.$(“ul”).replaceWith(“<ol></ol>”);//把无序列表替换成有序列表

      6.2.$(“<ol></ol>”).replaceAll(<ul>);//把无序列表替换成有序列表

    7.包裹节点(wrap()、wrapAll()、wrapInner())

      7.1.$(“input”).wrap(“<li></li>”);//使用li元素把input元素包裹起来

      7.2.其他两个方法类似,这里不累赘

    8.遍历节点

      8.1.children()

      该方法用于获取匹配元素的子元素(而不是所有后代元素,后代元素获取请看第一篇文章)

      $(“html”).children();//获取<html>元素的子元素,即head和body

      8.2.next()

      该方法用于获取匹配元素后面紧邻的同辈元素

      $(“head”).next();//获取<head>元素后面紧邻的同辈元素(因为<head>的同辈元素有且只用一个元素,即<body>元素,所以这里获得的是<body>元素)

    8.3.prev()

    该方法用于获取匹配元素后面紧邻的同辈元素

    $(“body”).prev();

    8.4.siblings()

    该方法用于获取匹配元素的同辈元素

    $(“head”).siblings();

    8.5.parent()、parents()

    parent()//获得父元素

    parents()//获得祖宗元素



bb.操作属性(attr()、removeAttr())

  1.获取属性和设置属性

  $(“input”).attr(“value”);//获取<input>元素的value属性值

  $(“input”).attr(“value”, “setiValue”);//获取<input>元素并设置其value属性为setiVlalue

  $(“input”).attr({“value” : “setiValue”, “name” : “setiName”});//获取<input>元素并分别设置其value属性为setiValue,name属性为setiName

  2.删除属性

  $(“input”).removeAttr(“name”);



cc.操作样式

示例HTML

<p class=”iClass” title=”样式操作”>样式操作</p>

  1.获取样式和设置样式

  同以上示例<p>元素中可以得知class是其属性,所以可以通过该属性来获取和设置样式(不明白的同学可以参考bb.操作属性)

  2.追加样式(addClass())

  $(“p”).addClass(“addClass”);//给<p>元素追加addClass样式

  3.移除样式(removeClass())

    3.1.移除指定样式:

    $(“p”).removeClass(“addClass”);//把刚刚向<p>元素追加的addClasss样式移除掉

    3.2.移除所有样式:

    $(“p”).removeClass();//移除<p>元素所有样式

  4.切换样式(toggleClass())

  切换样式就好比电闸的开关闸,当电闸开时,电路通路;当电闸关时,电路不通

  $(“p”).toggleClass(“addClass”);

  5.是否具有某一样式(hasClass())

  $(“p”).hasClass(“addClass”);



dd.设置和获取HTML、文本和值

示例HTML

<p title=”设置和获取HTML代码”><strong>锋利的jQuery</strong></p>

  1.设置和获取HTML代码

  $(“p”).html();//获取<p>元素的html代码,这里得到的结果是:<strong>锋利的jQuery</strong>

  $(“p”).html(“<strong>锋利的jQuery</strong>”);//设置<p>元素的html为<strong>锋利的jQuery</strong>

  2.设置或获取文本内容

  $(“p”).text();//获取<p>元素的文本内容,这里得到的结果是:锋利的jQuery

  $(“p”).text(“锋利的jQuery”);

  3.设置和获取元素的值

  示例HTML

  <input type=”text” value=”设置和获取元素的值” />

  $(“input”).val(“锋利的jQuery”);//这里把<input>元素的值设置为:锋利的jQuery

  $(“input”).val();//获取<input>元素的值



cc.操作CSS-DOM

CSS-DOM技术简单来说就是设置和获取style(层叠样式)对象的各种属性

  1.获取样式属性

  $(“input”).css(“color”);//获取<input>元素的样式颜色

  ...

  2.设置样式属性

    2.1.设置单一样式属性

    $(“input”).css(“color”, “red”);//设置<input>元素样式颜色为红色

    ...

    2.2.设置多个样式属性

    $(“input”).css({“color” : “red”, “fontSize” : “30px”});//设置<input>元素样式颜色为红色且字体大小为30像素

(未完...)

时间: 2024-11-10 07:31:51

jQuery简单入门(二)的相关文章

jQuery简单入门(三)

3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全部加载完成,才会为DOM元素添加事件行为;而jquery只要DOM元素加载完成,就立刻绑定事件 2.表现形式: $(function() { //你的实现逻辑 }); Ab. 事件绑定 事件绑定方法bind(eventType [, data],  function() {...}) 表现形式: $

JQuery 简单入门

1.选择器 1.Jquery选择器的各种用法 $(this) 当前元素 $("p") 所有<p>元素 $("input") 所有input元素 $(".intro") 所有 class=“intro” 的元素 $("p.intro") 所有 class="intro" 的<p>元素 $("#intro") id="intro" 的第一个元素 $

JQuery的入门(二)

Jquery的遍历 jQuery对象本身就是数组对象,通过jquery选择器获得的都是满足该选择器条件的元素对象的集合体,因此在常常需要对jquery对象进行遍历.这里有三种遍历Jquery的方法. 传统循环遍历 var $options = $(“option”); for(var i=0;i<$options.length;i++){ alert(option.value); } jQuery对象的方法 此方式是jQuery特有的遍历方式,使用jQuery集合对象调用each方法即可遍历.语

jQuery简单入门(四)

4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method=”POST” > <input type=”text” /><p/>” <input type=”submit” /> </form> Aa. 单行文本框应用 示例: 1.需求:当单行文本框获取和失去焦点改变样式 2.示例代码 $(function()

jQuery简单入门(五)

5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用频率来介绍 1.load()方法 load()方法能载入远程HTML代码并插入DOM中(实际项目中,该方法使用频率高???!!!) load(url [, data] [,callback]) 表现形式: A. 载入HTML文档 $(“tag”).load(“load.html”);//把load.

jquery简单入门(一)

相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://index.baidu.com/?tpl=demand&word=javascript) 如有纰漏,请各位看客赐教 内容目录:(本文采用连载模式组织) 1.jquery选择器 2.Dom操作 3.事件和动画 4.表单.表格应用 5.Ajax应用 1.jquery选择器(便捷.快速选定DOM,并对被选中的

JQuery简单入门

JQuery的遍历操作 1.  被遍历的对象(是一个集合) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用对象访问方式遍历</title> <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></scri

Redis入门很简单之二【常见操作命令】

Redis入门很简单之二[常见操作命令] 博客分类: NoSQL/Redis/MongoDB redisnosql缓存 Redis提供了丰富的命令,允许我们连接客户端对其进行直接操作.这里简单介绍一下作为常用的一些命令,包括对字符串.列表.集合.有序集合.哈希表的操作,以及一些其他常用命令. [ 基本操作] 1. 添加记录:通常用于设置字符串(string)类型,或者整数类型:如果key已经存在,则覆盖其对应的值. Shell代码   set name James 2. 获取记录:通过键获取值.

【转】requirejs简单入门

博主今天正式工作啦,工作中用到了js模块化技术,这里转来一个入门教程,很易懂,转给同样刚入门的你们~~ 原地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"&