第四章使用jQuery操作DOM元素

一、DOM的分类:
1.DOM core
2.HTML-DOM
3.CSS-DOM
二、css操作
语法:
$("#div1").css(“color”,“red”);
$("#div1").css({“color”:“red”,“margin”:“5px”});
//添加样式
$("#div1").addClass(“div1_style”);
//移除样式
$("#div1").removClass(“div1_style”);
三、jQuery操作文本:
1.html():
语法:
获取值:var val_html = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").html(); …("#div1").html(“值”);
2.text():
语法:
获取值:var val_text = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲div1").text(); …("#div1").text(“值”);
3.text和html的区别:
(1)都是操作文本的方法
(2)html可以解析html的标签,text不可以解析。
四、获取表单的值:
语法:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲inp").val(); 赋…("#inp").val(“值”);
五、节点与属性操作:
1.创建节点:
var $new_Node = (&quot;&lt;li&gt;第n个li&lt;/li&gt;&quot;);2.插入节点:内部插入:(1)append():向所选元素的后面插入节点(2)appendTo():与append的用法不一样,但是效果一样。eg:(&quot;&lt;li&gt;第n个li&lt;/li&gt;&quot;); 2.插入节点: 内部插入: (1)append():向所选元素的后面插入节点 (2)appendTo():与append的用法不一样,但是效果一样。 eg:("<li>nli</li>");2.1append()2appendTo():appendeg:(“ul”).append(newNode);(new_Node); (newNode);(new_Node).appendTo(“ul”);
(3)perpend():向所选择元素的前面插入节点。
(4)perpendTo():与perpend的效果一样,但是用法不一样。
eg:(&quot;ul&quot;).perpend((&quot;ul&quot;).perpend(("ul").perpend(new_Node);
(newNode).perpendTo(&quot;ul&quot;);外部插入:(1)after():向所选元素的后面插入(2)insertAfter():与after的用法不一样但是效果是一样的。eg:new_Node).perpendTo(&quot;ul&quot;); 外部插入: (1)after():向所选元素的后面插入 (2)insertAfter():与after的用法不一样但是效果是一样的。 eg:newNode).perpendTo("ul");1after():2insertAfter():aftereg:(“ul”).after(newNode);(new_Node); (newNode);(new_Node).insertAfter(“ul”);
(3)before():向所选元素的前面插入节点
(4)insertBefore():与before的语法不一样,但是效果一样。
eg:(&quot;ul&quot;).before((&quot;ul&quot;).before(("ul").before(new_Node);
(newNode).insertBefore(&quot;ul&quot;);3.删除节点:1.使用remove删除,可以直接删除节点。2.使用empty()删除,但是只能清空内容eg:new_Node).insertBefore(&quot;ul&quot;); 3.删除节点: 1.使用remove删除,可以直接删除节点。 2.使用empty()删除,但是只能清空内容 eg:newNode).insertBefore("ul");3.1.使remove2.使empty()eg:(“li:eq(0)”).remove();
$(“li:eq(0)”).empty();
4.替换节点:
1.replaceWith():将所选的元素替换成新的元素
2.replaceAll():与replaceWith的效果一样,用法不一样。
eg:
(&quot;li:eq(0)&quot;).replaceWith((&quot;li:eq(0)&quot;).replaceWith(("li:eq(0)").replaceWith(new_Node);
($new_Node).replaceAll(“li:eq(0)”);
六、设置元素的属性和给元素赋值:
1.attr()
语法:
获取值:var im_val = (&quot;img&quot;).attr(&quot;width&quot;);赋值:(&quot;img&quot;).attr(&quot;width&quot;); 赋值:("img").attr("width");(“img”).attr({width:“500”,height:“500”});
七、遍历子元素:
1.获取紧邻其后的一个同辈元素:next()
eg:(&quot;li:eq(0)&quot;).next().css(&quot;color&quot;,&quot;red&quot;);2.获取紧邻其前的一个同辈元素:prev();eg:(&quot;li:eq(0)&quot;).next().css(&quot;color&quot;,&quot;red&quot;); 2.获取紧邻其前的一个同辈元素:prev(); eg:("li:eq(0)").next().css("color","red");2.:prev();eg:(“li:eq(2)”).prev().css(“color”,“red”);
3.获取紧邻其后的所有同辈元素:nextAll();
eg:(&quot;li:eq(0)&quot;).nextAll().css(&quot;color&quot;,&quot;red&quot;);4.获取紧邻其前的所有同辈元素:prevAll()eg:(&quot;li:eq(0)&quot;).nextAll().css(&quot;color&quot;,&quot;red&quot;); 4.获取紧邻其前的所有同辈元素:prevAll() eg:("li:eq(0)").nextAll().css("color","red");4.prevAll()eg:(“li:eq(4)”).prevAll().css(“color”,“red”);
5.获取所有的同辈元素:silbings()
eg:(&quot;li&quot;).sibling().css(&quot;color&quot;,&quot;red&quot;);八、获取前辈元素:1.parent():获取其父亲元素。eg:(&quot;li&quot;).sibling().css(&quot;color&quot;,&quot;red&quot;); 八、获取前辈元素: 1.parent():获取其父亲元素。 eg:("li").sibling().css("color","red");1.parent():eg:(“li”).parent().css(“background”,“red”);
2.parent().parent():获取其爷爷的元素
eg:(&quot;li&quot;).parent().parent().css(&quot;background&quot;,&quot;red&quot;);3.parents():获取根元素,htmleg:(&quot;li&quot;).parent().parent().css(&quot;background&quot;,&quot;red&quot;); 3.parents():获取根元素,html eg:("li").parent().parent().css("background","red");3.parents():htmleg:(“li”).parents().css(“background”,“red”);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/326030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

30分钟掌握 C#6

1. 只读自动属性&#xff08;Read-only auto-properties&#xff09; C# 6之前我们构建只读自动属性&#xff1a; public string FirstName { get; private set; } public string LastName { get; private set; } 原理解析&#xff1a;就是编译器在生成set访问器时&#xff0c…

2019蓝桥杯省赛---java---A---6(完全二叉树的权值)

题目描述 思路分析 等差数列 代码实现 package lanqiao;import java.util.*; public class Main {public static void main(final String[] args) {Scanner sc new Scanner(System.in);int nsc.nextInt();int[]numsnew int[n1];long maxSum0;int minDeepInteger.MAX_VALUE;…

如何让面试官认可你的简历

转载自 如何让面试官认可你的简历 在之前的博客里写了很多面试技巧&#xff0c;这是有个前提&#xff1a; 至少候选人被面试了&#xff01; 在这个前提下&#xff0c;候选人哪怕失败了&#xff0c;至少也能用实战来检验和校对面试准备的结果&#xff0c;用句比较时髦的话来…

Linux中安装nc(netcat)常见问题

Linux中安装nc&#xff08;netcat&#xff09;常见问题 Spark Streaming编写wordCount程序时&#xff0c;在Linux集群中需要安装nc&#xff0c;来对程序中使用到的端口进行开放。在安装nc的时候&#xff0c;常出现的问题有以下几点!1、不建议使用 yum staill nc 进行安装&…

服务器c盘有个inetpub文件夹,老司机为你示范win10系统C盘inetpub文件夹删不掉的图文教程...

也许大家在用电脑工作的使用中会遇到win10系统C盘inetpub文件夹删不掉的情况&#xff0c;目前就有很多朋友向我资讯关于win10系统C盘inetpub文件夹删不掉的具体处理步骤。小编把总结的关于win10系统C盘inetpub文件夹删不掉的方法了教给大家&#xff0c;只用你按照  1、右键点…

体验VS2017的Live Unit Testing

相对于传统的Unit Test,VS2017 带来了一个新的功能,叫Live Unit Testing,从字面意思理解就是实时单元测试,在实际的使用中,这个功能就是可以在编写代码的时候进行实时的background的单元测试. 在体验之前,有几点注意事项是需要了解的: 1.目前 live unit tesing仅仅支持 C#和V…

sqlserver复习总结

--已知有一个表&#xff1a;该表的字段有&#xff1a;id,name,date,gradeid,email --1.插入一条记录&#xff1a; insert into table_name values (1,刘世豪,2017-10-21,1,666qq.com) --2.修改 update table_name set name 张云飞 where id 1 --3.删除 delete from table_name…

Map的两种遍历方法

COPY/*** HashMap的使用* 存储结构&#xff1a;哈希表&#xff08;数组链表红黑树&#xff09;*/public class Demo2 {public static void main(String[] args) {HashMap<Student, String> hashMapnew HashMap<Student, String>();Student s1new Student("tan…

服务器windows系统如何登陆,如何登陆windows云服务器

如何登陆windows云服务器 内容精选换一换远程登录的账号和密码是多少&#xff1f;登录云服务器的用户名和密码&#xff1a;Windows操作系统用户名&#xff1a;AdministratorLinux操作系统用户名&#xff1a;root登录云服务器的用户名和密码&#xff1a;Windows操作系统用户名&a…

Java集合面试问题

转载自 Java集合面试问题 Java集合框架为Java编程语言的基础&#xff0c;也是Java面试中很重要的一个知识点。在本文中&#xff0c;列出了一些关于Java集合的重要问题和答案。 1.Java集合框架是什么&#xff1f;说出一些集合框架的优点&#xff1f; 每种编程语言中都有集合…

深入.net平台的分层开发

一、搭建三层的步骤&#xff1a; 1.创建一个窗体应用程序&#xff1a;新建–》新建项目–》选择窗体应用程序–》给项目命名–》选择存放的路径。 2.创建数据访问层&#xff08;DLL层&#xff09;&#xff1a;文件–》添加–》新建项目–》选择类库–》起个名字&#xff08;项目…

2018蓝桥杯省赛---java---B---8(日志统计)

题目描述 小明维护着一个程序员论坛。现在他收集了一份"点赞"日志&#xff0c;日志共有N行。其中每一行的格式是&#xff1a; ts id 表示在ts时刻编号id的帖子收到一个"赞"。 现在小明想统计有哪些帖子曾经是"热帖"。如果一个帖子曾在任意一个长…

法兰克服务器电源维修,发那科FANUC系统控制电源简介

摘要发那科系统电源 推荐的外部24VDC电源(稳压电源)(电源电压必须满足UL1950的要求)。该电源不能与机床强电柜内I/O点或伺服电动机的抱闸共用。如果在控制单元的电源关掉后断开电池&#xff0c;则控制单元中存储的绝对脉冲编码器的当前位置&#xff0c;系统参数&#xff0c;程序…

这些代码优化的方法,你都用过吗

转载自 这些代码优化的方法&#xff0c;你都用过吗 代码优化的最重要的作用应该是&#xff1a; 避免未知的错误 在代码上线运行的过程中&#xff0c;往往会出现很多我们意想不到的错误&#xff0c;因为线上环境和开发环境是非常不同的&#xff0c;错误定位到最后往往是一个…

myeclipse如何换一个漂亮的主题

熟悉hbuilder的童鞋们都知道&#xff0c;在开发的时候主题有好几种可以随意切换&#xff0c;但是在开发java时用到的myeclipse的主题是否可以随意切换呢&#xff1f;如果可以在哪里切换&#xff0c;今天我们就来看看如何修改myeclipse的主题&#xff01; 一、首先我们要切换个漂…

基于C#.NET的高端智能化网络爬虫

前两天朋友发给我了一篇文章&#xff0c;是携程网反爬虫组的技术经理写的&#xff0c;大概讲的是如何用他的超高智商通过&#xff08;挑衅、怜悯、嘲讽、猥琐&#xff09;的方式来完美碾压爬虫开发者。今天我就先带大家开发一个最简单低端的爬虫&#xff0c;突破携程网超高智商…

2019蓝桥杯省赛---java---B---7(外卖店优先级)

题目描述 时间限制: 1.0s 内存限制: 512.0MB 本题总分&#xff1a;20 分 【问题描述】 “饱了么”外卖系统中维护着 N 家外卖店&#xff0c;编号 1 ∼ N。每家外卖店都有 一个优先级&#xff0c;初始时 (0 时刻) 优先级都为 0。 每经过 1 个时间单位&#xff0c;如果外卖店没有…

left join 和 left outer join 的区别

通俗的讲&#xff1a; A left join B 的连接的记录数与A表的记录数同 A right join B 的连接的记录数与B表的记录数同 A left join B 等价B right join A table A: Field_K, Field_A 1 a 3 b 4 c table B: Field_K, Field_B 1 x 2 y 4 z select a.Field_K, a.…

服务器母鸡系统,母鸡云服务器

母鸡云服务器 内容精选换一换云耀云服务器创建成功后&#xff0c;您可以根据需求&#xff0c;修改云服务器的名称。系统支持批量修改多台云耀云服务器的名称&#xff0c;修改完成后&#xff0c;这些云耀云服务器的名称相同。登录控制台。单击管理控制台左上角的&#xff0c;选择…

在ASP.NET Core中使用Apworks开发数据服务:对HAL的支持

HAL&#xff0c;全称为Hypertext Application Language&#xff0c;它是一种简单的数据格式&#xff0c;它能以一种简单、统一的形式&#xff0c;在API中引入超链接特性&#xff0c;使得API的可发现性&#xff08;discoverable&#xff09;更强&#xff0c;并具有自描述的特点。…