jQuery之dom操作（取赋值方法）
取赋值相关方法：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src = "./jquery.js"></script>
<script>
$('ul').html(); //取值 (ul里的li全部取)
控制台中 console.log($('ul').html())；
显示为
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
$('ul li').html(); //只取第一个li 结果为1
//innerHTML
$('ul').html(''); //赋值(可传普通字母，也可带标签)
//还可传函数
var arrName = ['周','王','张','白','刘']
$('ul li').html(function(index,ele){
return '<p style="color:orange">'+ arrName[index] + '</p>'
})
//赋值时附一个值会把所有的li都赋成9 (取值时取一个，赋值时赋所有)
$('ul li').html('9');
</script>
2、text( )
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src = "./jquery.js"></script>
<script>
// text innerText
$('ul').text(); //取值
console.log($('ul').text());
显示
1
2
3
4
5
$('ul li').text(); //取值（都取，与html不同）
console.log($('ul li').text());
显示 12345
//赋值
$('ul li').text('9') //都变9
$('ul').text('9') //覆盖掉 变成一个9
$('ul').text('<p>3</P>') //文本形式的标签 显示结果： <p>3</p>
//也可传函数
$('ul li').text(function(index,ele){
return arrName[index];
})
</script>
3、size( )
$('ul li').size(); //相当于$('ul li').length
4、.addClass( ) 可传字符串
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<script>
$('.demo').eq(0).addClass('active')
</script>
也可填两个属性
$('.demo').eq(0).addClass('active duyi')
所有div都加active属性
$('.demo').addClass('active')
也可传函数
.removeClass() 用法同理.addClass( )
.hasClass() 判断标签中存不存在类名
<div class="demo active"></div>
<div class="demo"></div>
<div class="demo"></div>
<script src= "./jquery.js"></script>
<script>
console.log($('.demo').hasClass('active'));
//有active类名 返回true
小案例 （点击更改颜色）
<style>
.demo{
width:100px;
height:100px;
background:red;
margin-bottom:10px;
}
.demo.active {
background:orange;
};
</style>
</head>
<body>
<div class="demo active"></div>
<div class="demo"></div>
<div class="demo"></div>
<script src= "./jquery.js"></script>
<script>
$('.demo').click(function(e){
$('.demo').removeClass('active')
$(this).addClass('active')
});
</script>
换肤
.wrapper .style1{
background:orange;
}
.wrapper .style1 li{
background:blue;
}
.wrapper .style2{
background:purple;
}
.wrapper .style2 li{
background:sienna;
}
.wrapper.active .style1{
background:red;
}
.wrapper.active .style1 li{
background:blueviolet;
}
.wrapper.active .style2{
background:paleturquoise;
}
.wrapper.active .style2 li{
background:greenyellow;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class = "style1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul class = "style2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script src="./jquery.js"></script>
<script>
$('.wrapper').click(function (index,ele) {
if($(this).hasClass('active')){
$(this).removeClass('active')
}else{
$(this).addClass('active')
}
});
.css( )
//.css赋值形式
$('.demo').css('width','100px')
$('.demo').css('width',100)
//多个样式
$('.demo').css({width:'100px',height:'100px',backgroundColor:'red'})
.css({width:'+=100px'}) //这种形式也可以
//也可取值
console.log( $('.demo').css('backgroundColor')) //结果返回RGB
.attr( ) 基于 setAttribute getAttribute
.prop( )
<div class="demo" cst = 'aa'></div>
<input type="checkbox" checked = ''>
<script src="./jquery.js"></script>
<script>
//取值
console.log( $('.demo').attr('class')) // 结果 demo
console.log( $('.demo').attr('cst')) // 结果 aa
//checked中有没有赋值都返回checked
console.log( $('input').attr('checked'))//取值是selected checked disabled 不用attr方法
//prop 在标签上取值只能取特性的值
console.log( $('.demo').prop('class')) //cst不可以取
console.log( $('input').prop('checked')) //返回 true 如果把checked = ''去掉则返回false (关注状态是否被选中) //赋值
$('.demo').attr('id','demo1'); //自定义的属性使用attr
$('.demo').prop('id','demo1'); //特性使用prop
jQuery之dom操作（取赋值方法）的更多相关文章
- jQuery 第二章 实例方法 DOM操作取赋值相关方法
取赋值相关方法: .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
- js，jQuery和DOM操作的总结（二）
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- jQuery – 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
- 03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
- Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
随机推荐
- Page Cache, the Affair Between Memory and Files.页面缓存-内存与文件的那些事
原文标题:Page Cache, the Affair Between Memory and Files 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限 ...
- Linux交换空间（swap space）
每次安装Linux的时候,都会要求配置交换分区,那么这个分区是干嘛的呢?不设置这个分区有什么后果?如果一定要设置,设置多大比较合适?本篇将试图回答这些问题并尽量覆盖所有swap相关的知识. 下面的所有 ...
- tomcat7.0安装笔记
1. 解压,新增系统环境变量CATALINA_HOME,值为tomcat所在目录,如E: tomcat7.0 PS:安装JAVA时没有配置系统变量JAVA_HOME,导致报错无法启动tomcat,新建 ...
- springboot打包
springboot项目运行package命令,默认打出来的jar包只有几kb.想要打出可执行的jar包,加入插件: <build> <plugins> <plugin& ...
- 重识linux-linux的账号与用户组
重识linux-linux的账号与用户组 1 账号 每个登录linux系统的用户都有 uid和gid uid就是用户ID,gid就是组ID 在系统上存账号信息的文件是 /etc/passwd 存密码相 ...
- 1.理解Numpy、pandas
之前一直做得只是采集数据,而没有再做后期对数据的处理分析工作,自己也是有意愿去往这些方向学习的,最近就在慢慢的接触. 首先简单理解一下numpy和pandas:一.NumPy:1.NumPy是高性能计 ...
- HTML5 图片宽高自适应，居中裁剪不失真
一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的 1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较, 2, 从而确定拉伸或者压缩之后是宽还是 ...
- <记录> PHP Redis操作类
namespace common\controller; class Redis { public $redisObj = null; //redis实例化时静态变量 static protected ...
- 抛出异常 exception
throw raise raise Exception.CreateFmt(sFileWithNoExt, [FileName]);
- 机器学习进阶-图像梯度计算-scharr算子与laplacian算子(拉普拉斯) 1.cv2.Scharr(使用scharr算子进行计算) 2.cv2.laplician(使用拉普拉斯算子进行计算)
1. cv2.Scharr(src,ddepth, dx, dy), 使用Scharr算子进行计算 参数说明:src表示输入的图片,ddepth表示图片的深度,通常使用-1, 这里使用cv2.CV_6 ...