首页
学习
活动
专区
圈层
工具
发布

WEB入门之十六 操作DOM节点

节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。 ​...表7-1-4 节点过滤函数 ​节点过滤函数​ ​说明​ eq( ) 按索引获取匹配元素中的第n个元素,索引从0开始 first( ) 获取匹配元素中的第1个元素 last( ) 获取匹配元素中的最后1...个元素 slice( ) 按起始索引获取匹配元素中的子集 下面通过一个示例来演示eq、first、last和slice函数的用法,这几个函数有个共同点:都是通过索引进行过滤的。...:"+$(":text").first().val()+"\n"; var t2="索引是1的文本框的值是:"+$(":text").eq(1).val()+"\n"; var t3="最后一个文本框的值是...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。

65410
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WEB入门之十六 操作DOM节点

    节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。...表7-1-4 节点过滤函数 节点过滤函数 说明 eq( ) 按索引获取匹配元素中的第n个元素,索引从0开始 first( ) 获取匹配元素中的第1个元素 last( ) 获取匹配元素中的最后1个元素...:"+$(":text").first().val()+"\n";var t2="索引是1的文本框的值是:"+$(":text").eq(1).val()+"\n";var t3="最后一个文本框的值是...表7-1-5 节点查找函数 节点查找函数 说明 children( ) 根据条件获取元素的子元素 parent( ) 获取元素的父元素 prev( ) 获取紧挨着的前一个平级元素 next( ) 获取紧挨着的后一个平级元素...当单击【修改】按钮时,单元格中的文本信息替换为文本框;单击【确定】按钮时,文本框中的数据显示到单元格中。

    49710

    day40_jQuery学习笔记_01

    1.3、jQuery 的介绍 JQuery是继prototype之后又一个优秀的Javascript库。...示例动图如下: 3.3、基本过滤选择器 过滤选择器格式 “:关键字” 详解如下: :first          获取第一个元素(因为jQuery对象的内部是一个数组) :last           ...获取最后一个元素 :eq(index)      获取指定索引的元素 :gt(index)      获取大于指定索引的元素 :lt(index)      获取小于指定索引的元素 :even           ...="选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="btn2"/>     文本隐藏域, ...);             });             // 的div父元素下的最后一个子元素" id="btn3

    6.9K20

    与Ajax同样重要的jQuery(2)

    ]) 获取指定的子元素 find(expr) 获取指定的后代元素 parents([expr]) 获得祖辈元素 parent() 获取父元素 next([expr]) 获取下一个兄弟元素 prev([expr...]) 获取前一个兄弟元素 siblings([expr]) 获取所有兄弟元素 在XML 解析中 find 方法使用最多 对查找结果进行遍历操作 each(function(){… }) ,在each函数中可以通过...④:HTML代码&文本&值操作 l 读取和设置某个元素中HTML内容 html() 读取innerHTML html(content) 设置innerHTML l 读取和设置某个元素中的文本内容 text...² div>传智播客div> 获取div中 html和text 对比 ² 使用val() 获得文本框、下拉框、单选框选中的value ² 测试能否通过 val() 设置单选框、下拉框的选中效果...> 获取div中 html和text 对比 var $obj = $("div>传智播客div>"); // alert($obj.html()); // alert($obj.text

    6.8K50

    jQuery的使用

    一、使用JQ完成首页的定时广告弹出 1.需求分析 在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。【使用jQuery实现】 ?...页面加载函数是最后一个生效, 它会覆盖之前的。...Jquery的效果 ? 3.实现步骤 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素。..." id="btn2" value="body中的最后一个div元素"/> 中的奇数的div"/> 的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】 第四步:接着遍历数组中的城市 第五步:创建一个城市文本节点

    8.9K31

    Jquery简介选择的

    大家好,又见面了,我是全栈君 前言 Jquery一个js相框(程序代码相结合)这是一个程序开发过程中的半成品;分类似该框架EXTJS。...:parent 返回值:Array 匹配含有子元素或者文本的元素 描写叙述: 查找全部含有子元素或者文本的 td 元素 HTML 代码: <...[attribute] 匹配包括给定属性的元素。注意,在jQuery 1.3中。前导的@符号已经被废除!假设想要兼容最新版本号,仅仅须要简单去掉@符号就可以。...不包含select中的option;varc = ops[e.selectedIndex].value;通过获取当前訪问的option对象在数组中的位置。...‘:last’仅仅匹配一个元素,而此选择符将为每一个父元素匹配一个子元素 演示样例描写叙述:在每一个 ul 中查找最后一个 li HTML 代码: John

    2K20

    day41_jQuery学习笔记_02

    这个元素的位置是从0算起。即:0表示开始第一个     -index:负数,从尾开始获得指定索引的元素。从集合中的最后一个元素开始倒数。...即:-1表示最后一个 first()             第一个   类似 :first last()              最后一个 类似 :last is()                ..." value="选择第一个div元素" id="btn2"/>     最后一个div元素" id="btn3"/>     <input ...类似:$("A, B") andSelf()   将之前的对象添加到操作的集合中     A.children().andSelf()          A   A的孩子    A的孩子和A end()...// 因为在jQuery中是队列形式存在的,一个一个的执行         $(function() {             alert("O(∩_∩)O哈哈~");         });

    4.1K20

    jQuery的基本操作

    ,而次选择符将为每一个父元素匹配到最后一个子元素· //描述 //在每个ul中查找最后一个li HTML代码 11111 22222</li...XML文档·但可以用于XHTML文档· //在一个HTML文档中,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素的HTML内容会被获取·...(index,text) 此函数返回一个字符串·接受两个参数,index为元素在集合中的索引位置,text为原先的text值· 无参数描述 设置所有p元素的文本内容 jQuery代码 $("p...用于 check/select的值 无参数描述 获取文本框的值 jQuery代码 $("input").val(); 参数val描述: 设定文本框的值 jQuery代码 $("input")...),不过get(index)返回的是DOM对象· index //一个整数,指示元素基于0的位置,这个元素的位置是从0算起· -index //一个整数,指示元素的位置,从集合中的最后一个元素开始倒数

    8.2K20

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    1 筛选[掌握]  筛选与之前“选择器”雷同,筛选提供函数 1.1 过滤 eq(index|-index),获取第N个元素 •index:一个整数,指示元素基于0的位置...•-index:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。...(1算起) first(),获取第一个元素 last(),获取最后个元素 hasClass(class),检查当前的元素是否含有某个特定的类,如果有,则返回true。...如果元素是一个iframe,则查找文档内容 contents() 获得所有节点(子元素、文本) abc xxx end() 回到最近的一个”破坏性”操作之前 end() 回到最近的一个”破坏性”...事件对象: 由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展和封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事

    9.4K20

    jQuery(一)

    设置样式的时候,css是直接添加到style属性中 $('h1').css('font-weight'); // 获取第一个h1的字体宽度 $('h1').css('fontWeight'); // 同理...false 获取设置表单值 $('#surname').val(); // 获取surname的文本域的值 $('#usstate').val(); // 获取值 $('select#extras')....移出数据 var x = $('div').data('x'); // 获取一些数据 修改文档结构 插入和替换元素 下面是正着 $('h1').append('br/>'); // 将br作为h1的子节点...替换为br 复制元素 // 给文档结尾添加一个带有linklist id 的新div $(document.body).append('div id="linklist">List of Links...div>'); // 将文档中的所有链接复制并插入该新div中 $('a').clone().appendTo('#linklist'); // clone不会复制事件处理程序 // 在每一个链接后插入

    2.6K40

    全网最新、最全的jQuery核心知识,你真的不想点开看看嘛?

    对象数组中dom对象的顺序和声明dom对象时的顺序保持一致 div>1div> dom1 div>2div> dom2 div>3div> dom3 $("div") == [dom1...11.1基本过滤器 选择第一个 first,保留数组中的第一个dom对象 语法:$("选择器:first") 选择最后一个 last,保留数组中的最后一个dom对象 语法:$("选择器:last") 选择数组中的指定对象...注意:在代码中的写的等标签不会在页面中显示,而是会在页面中执行,但是获取的文本内容中含有这个 $(选择器).html():无参数调用方法,获取 DOM 数组第一个dom对象的在网页上显示的文本内容。...JQuery提供了 each() 方法用于遍历匹配的元素信 element: 数组的对象 : 这个是自定义的数组中的元素的标识符,这个元素可以是普通元素(直接获取)、json对象的value(直接获取)...type="button" />我是一个按钮br/> 我是一个按钮br/> 我是一个按钮

    7.1K10
    领券