Jquery属性操作、添加类

柔情只为你懂 2021-11-09 07:50 373阅读 0赞

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

<style type="text/css">

.red\{

*color*: red;

\}

.box3\{

*width*: 100px;

*height*: 100px;

*background*: red;

\}

</style>

</head>

<body>

**addClass()  添加类名**

**   removeClass() 移除类名**

**   toggleClass() 添加或移除类名,这个方法很灵活，很舒服**

**   html()   无参数时获取内部html或者有参数设置内部html**

**   text() 无参数时获取内部文本或者有参数设置内部文本**

**   val()  获取或者设置表单元素的value**

**   css()  获取或者设置css样式**

**   一个字符串参数  获取**

**   一个对象       设置**

**   两个参数       设置**

**   attr()         给普通标签设置或者获取属性**

**   removeAttr()    移除属性**

**   prop() 给表单元素设置和获取属性**

**   data() 给JQ对象设置属性**

**   offset  偏移值**

**<div id="box">box</div>**

**   <div id="box1">**

**      <span>span1</span><span>span2</span>**

**   </div>**

**   <div id="box2">111</div>**

**   <div id="box100"></div>**

**  **

**   <input type="text" name="" id="t">**

**<div class="box3"></div>**

<script type="text/javascript">

** ** //开始这样<div id="box100"></div>**，**

**   **   //添加属性后变成<div id="box100" name="zhangsan"></div>

**      $("\#box100").*attr*("name","zhangsan");  **

**      $("\[name=zhangsan\]").html("123")        /**/因为有属性了，所有可以赋值

**      $("\#box").addClass("red").click(*function*()\{**

**         //** $(this).removeClass("red");

**         /**/this指id名为box对应的标签,  toggleClass()这个方法有类就删除类，没类就添加类，很灵活，很舒服

**         $(*this*).toggleClass("red");      **

**      \});**

** **

**      $("\#box1").html("<span>hello</span>"); ** //设了参数就替换了原来的值

**      $("\#box2").*text*("<span>hello</span>"); ** //设了参数就替换了原来的值，标签名也会写上去

** **

**      $("\#t").val("happy");            　　 //**给表单赋值的

**      $("\#t").change(*function*()\{          ** //输入框内容发生改变时,鼠标一移开马上触发

**         alert(123)     **

**      \})**

**      $(".box3").*css*("background","\#FFFF00");　　** //2个值设置宽度

**     **

**      $("\#box").*attr*("index",0);          ** //添加属性，2个参数添加属性，一个参数获得属性

**      $("\#box").removeAttr("index");      ** //移除属性

</script>

</body>

</html>

转载于:https://www.cnblogs.com/binghuaZhang/p/10841900.html

发表评论取消回复

表情：

评论列表（有 0 条评论，373人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery学习笔记07-操作类属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

本是古典何须时尚/ 2024年04月17日 16:44/ 0 赞/ 97 阅读

相关 jquery的样式操作，类操作（添加删除 css）

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

刺骨的言语ヽ痛彻心扉/ 2022年07月14日 00:40/ 0 赞/ 243 阅读

相关 jquery属性操作添加属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

淩亂°似流年/ 2022年07月14日 00:40/ 0 赞/ 322 阅读

相关 jQuery操作属性，CSS类,HTML代码，文本，值

属性 attr 取/设值 removeAttr 移除属性 prop 类似attr removeProp prop与attr的区别：attr用于取自己定义属性

ゝ一纸荒年。/ 2022年05月29日 14:15/ 0 赞/ 265 阅读

相关 jquery属性操作

jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm = $('div1').html()

╰半夏微凉°/ 2022年05月09日 14:34/ 0 赞/ 277 阅读

相关 jQuery-CSS类属性操作

jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些： addClass() - 向被选元素添加一个或多个类 re

àì夳堔傛蜴生んèń/ 2022年04月16日 00:08/ 0 赞/ 271 阅读

相关 jQuery基础（四）—— jQuery属性操作

（1）内容选择器：：has(selector)//选中包含指定子元素的元素：contains（）//选中包含指定文本内容的指定元素：empty（）//选中既没有

怼烎@/ 2022年03月26日 15:28/ 0 赞/ 300 阅读

相关 JQuery操作HTML属性

每一个HTML元素，都是一个DOM对象每一个对象都会有其对应的属性对于如图所示的img标签 ![watermark_type_ZmFuZ3poZW5naGVpdGk_

小鱼儿/ 2022年01月22日 22:37/ 0 赞/ 328 阅读

相关 jQuery属性操作

jQuery属性操作　　使用 jq 操作标签的属性 Demo: 1.获取元素的指定属性值　　attr()可以操作原生属性, 还可以操作自定义的属性　　pro

àì夳堔傛蜴生んèń/ 2022年01月11日 06:45/ 0 赞/ 324 阅读

相关 Jquery属性操作、添加类

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document

柔情只为你懂/ 2021年11月09日 07:50/ 0 赞/ 374 阅读