一些方法(自己的认知)

下面的解释,外面的为官方解释,括号内为我自己的理解。

addclass():

向元素添加类名。(用处,在css里面写多各类,以后用addclass实现动态添加或改变样式)

html代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>api</title>
 6     <script src="../../base/jquery-3.1.0.js"></script>
 7     <link rel="stylesheet" href="style.css">
 8 </head>
 9 <body>
10 <div id="show"></div>
11 <button id="btn">Click Me</button>
12 <script src="main.js"></script>
13 </body>
14 </html>

css代码:

1 #show{
2     width: 300px;
3     height: 300px;
4     background-color: coral;
5 }
6 .bkBlue{
7     background-color: blue;
8 }

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4        $("#show").addClass("bkBlue");
5     });
6
7 });

发现点击后,div背景颜色不变.看下截图:

如图,蓝色直接GG了。表明它不能覆盖(因为这里涉及到了权重的问题,id选择器的权重大于类选择器,易出错)

把show该为类,则正常输出。

(下面代码也都用类去执行了╮(╯▽╰)╭)!!!



after():

在匹配的元素之后插入内容

before():

在匹配元素之前插入内容

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4         $(".show").before("<p>heiheihei</p>");
5         $(".show").after("<p>hahaha</p>");
6     });
7
8 });

效果图:

append()和appendTo():

向元素内部添加内容。

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4         $(".show").append("<p>inner1</p>");
5         $("<p>inner2</p>").appendTo($(".show"));
6     });
7
8 });

效果图:



attr():

设置或返回匹配元素的属性和值。

转载:http://blog.sina.com.cn/s/blog_7fb1495b0100vcyk.html

这篇文章是我见过写的最好的。就当玉放自己家了。



clone():

创建匹配元素的集合的副本。(注意是副本,不是元素本身,估计和Java里面的克隆差不多,和添加本体区别在于地址不变,改变它不影响主体)。

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4         $(".show").append($("<p>haha</p>").clone());
5     });
6
7 });


detach():

从DOM中移除匹配的元素集合

html代码修改为:

1 <div class="show">
2     <p class="p1">1</p>
3     <p class="p2">2</p>
4     <p class="p3">3</p>
5 </div>

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4         $(".p1").detach()
5     });
6
7 });

效果:移除p1。



empty():

删除匹配元素集合中所有的子节点(注意是所有)

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4         $(".show").empty();
5     });
6
7 });

效果移除所有的p标签。



hasClass():

检查元素是否拥有指定的类。(可用于,为没有添加某个样式的标签添加该样式,用它加个判断,没有则添加。)

main.js代码:

1 $(function () {
2
3     $("#btn").click(function () {
4         alert($(".p1").hasClass("p"));
5     });
6
7 });

效果输出:false。



html():

设置或返回匹配元素集合html的内容。

时间: 2024-10-07 18:06:48

一些方法(自己的认知)的相关文章

如何应对压力?教你15min减压的简易方法

从少年到老年,在我们的人生之路上,无处不在的压力令我们无法逃避.在承受压力时,我们往往会失眠.愤怒.恐惧或抑郁,各种疾病也接踵而至.如何有效应对压力是我们健康和幸福生活的需要.以下这些简单的方法可以使你在15分钟内减轻压力,让你的心情归于和谐.平静 我们不妨先来认识一下压力.压力通常被用来描述人们在面对工作.人际关系.个人责任等的要求时所感受到的心理和精神上的紧张状态.压力类型有正性压力,中性压力,负性压力.正性压力是好的压力,它会激发个体朝向成就和健康的水平:中性压力被认为是无关紧要或无所谓的

文案写作有哪些关键步骤?

从事网络运营工作,文案写作是必不可少的环节,那文案写作中有哪些注意事项,有哪些关键步骤呢,本文就和大家一起来扒一扒. 文案归根结底是产品(品牌)战略的终端艺术展示,卓越的文案离不开对战略思想的彻悟,对产品的用心体验.对用户的感同身受. 我以前面试高级运营候选人时,经常会使点小坏心眼: 先跟候选人谈生活谈理想让他极度放松跟我称兄道弟以为Offer十拿九稳的时候,漫不经心的抛出一个烧脑的开放型问题,比如: "假如你现在运营共享雨伞app,要在地铁投放一期广告,文案你打算怎么写?" 大部分人

面对对象总结

1. 基础概念:1.面向过程:认识事物和分析解决问题的方式,强调解决问题的流程化                          功能行为,缺点就是不能很好地适应需要的变化c/c++                        2.面向对象:认识事物的方式方法,全面认知事物(属性,方法),将有联系的功能打包放入一个对象里,基于面对过程                       3.面向接口编程:抽象对象身上的属性,方法.通过接口的实现类创建接口对象(contactdao cd=new co

因素空间发展评述

因素空间发展评述      刘海涛1,包研科1,郭嗣琮1,何华灿2, 何平3 (1. 辽宁工程技术大学 智能工程与数学研究院, 辽宁 阜新 123000: 2. 西北工业大学 计算机学院,陕西 西安 710072: 3. 辽宁警官学院 信息系,辽宁 大连 116036) ——2016年3月 摘 要:为了适应信息革命和大数据时代的需要,模糊数学要更多地切入智能数据的领域. 在这方面,我国早期学者汪培庄教授提出了因素空间的数学理论,从服务于模糊数学的研究开始,进而转向认知描述,建立了知识表示的数学描

快速幂浅谈

快速幂——>Miller_Rabin方法 1.初步认知:2 // 11 == 1101 == 2^0+2^2+2^3 #include<bits/stdc++.h> using namespace std; int pow(int a,int b) { int ans=1,base=a; while(b!=0) { if(b&1!=0) ans*=base; base*=base; b>>=1; } return ans; } int main() { int a,b

Flyway 助力数据库脚本自动化管理攻略

原文地址:梁桂钊的博客 博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. 今天,探讨一个有趣的话题:我们可以通过 Git 来实现项目版本控制:通过?Jenkins 进行持续集成,那么对于数据库层面,我们仍然依赖于纯手工运行 SQL 脚本,对此,我们在多环境(开发环境.测试环境.预发环境.生产环境)中如何确保其 SQL 脚本的最新性和正确性? 众所周知,人工的操作非常容易出问题,我们应该让程序帮忙自动进行管理和

小程序开发另类小技巧 --用户授权篇

本文主要帮助大家解决部分功能接口二次授权+统一管理(包含对于wx对象的扩展)问题,例如获取地理位置信息,收获地址,录音等授权问题 小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊,不包含在本文范围内,主要针对需要授权的功能性api,例如:wx.startRecord,wx.saveImageToPhotosAlbum, wx.getLocation 原文地址:https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址:https

结合实际案例,一篇看懂用户体验五个层次

一.概要 用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像<Don’t make me think>里提到的“这会让用户觉得自己更聪明,更能把握全局,这会让他们成为老用户”.Garrett 大师围绕“以用户为中心的设计”得出一套产品设计的思维方式:从抽象到具体逐层击破五个层面,包括战略层.范围层.结构层.框架层和表现层,最终达到用户体验设计目的. 二.五个层面 战略层.范围层.架构层.交互层.视觉层五个层次 战略层:企业愿景.产品定

初步认知java的方法

1.正确区分函数和方法: 面向对象的语言叫做方法,面向过程的语言叫做函数,两者的意义是一样的,只是叫法不同.java是面向对象的语言,所以用方法. 2.方法的定义: 就是有名字的代码段 3.方法的目的: 就是为了代码的重用. 相同的类型操作不容重复的写代码.如果在代码中,重复的写了很多相似的代码,代表你写的程序是有问题的 4.方法的构成: [方法修饰符列表] 方法返回值类型  方法名(参数1,参数2,.....){ 执行语句; } 注释: 1方法修饰符列表是可选的:权限控制的:public/ p

学习与认知方法

互联网工具多不胜数,知识海洋浩瀚如海.掌握每个工具,学习每个知识点非常的不现实,所以有必要掌握方法,需要时直接提取资源即可.将学习和应用的过程抽象后有以下图片.每当学习完成一个工具后和知识后只要通过这个图像,不依赖书本或者视频及其他资源可以具象出所学的知识即可.工程化应用则是相反的.是对学习过程的回溯