jQuery(基础dom及css操作)
设置元素内容
元素属性操作
----------
元素样式操作
----------------
对象数组的遍历
测试代码:
$(function () {
var v=$('div').css(['color','width','height']);//获得的是一个对象数组
/*
for(var i in v){
alert("属性名称:"+i+",它的默认值或者设置的值为:"+v[i]);
}
*/
//使用jquery进行遍历
$.each(v, function (attr,value) {//第一个参数是 获取的对象数组 第二个参数是一个function
alert("获取的属性名称为:"+attr+",它的值为:"+value);
}) })
-------------
//为选中的元素 添加多个样式
$('div').css('color','#ccc').css('background-color',"#FFF");//这种方式可以用下面的方式代替
$('div').css({
'color':'blue',
'background-color':'red',
'width':'50px',
'height':'30px'
});
------------------------
addClass,removeClass
js中的代码:
//首先在html页面中引入css 样式表 才能在这里实现动态的添加 通过这个方法增加一个样式时 不仅样式加上了 而且会动态的设置class的属性值(在调试窗口可以看到)
//但是真正的class属性值 通过这种方法是不会动态改变的 最初设置了 就是最初设置的那个值 在通过class获取的时候也是通过最初设置的那个值获取
$('div').addClass('red bg size');//将来这里边的值 将会作为选中的元素的class属性值 而且 这里边因为有三个样式 所以目标div中也将存在这些样式
alert($('div').length);//这里获取的div为2个 所以打印2
alert($('div').attr('class'));//打印出的div值 却只有第一个div的class值 a red bg size
alert($('.a').length);//打印1 但是通过class获取div的时候 却只能通过 .a来获取 而不能通过 .a red bg size 来获取 它找不到
// 虽然样式是加上了 而且在调试窗口中 class 的值确实动态设置为 a red bg size 但是不能通过 动态设置之后的class值进行获取 而只能通过最初设置的class值来获取
alert($('.a red bg size').length);//打印0 因为没有获取到任何的div
//所以总结:在调试窗口中虽然看到class的内容值 为 a red bg size 但是最初设置的是什么内容 就要以什么内容为主 如果没有设置 那么它就没有class这个属性值
//当然不能通过class属性值来获取 即使他在调试窗口中动态的设置class 为 red bg size 这都是不管用的 全部以最初的设置为主 要么存在class 要么不存在
也可以在class属性中直接定义外部引入的样式 但是真正的class值为 第一个空格前面的部分
--------------------------
toggleClass
运行效果:
第一次单击
再次单击恢复
而调试窗口中的class中的属性值也随着用户的单击在动态的变化着 样式改变时 class属性值中增加了对应的数值 再次单击 div中的class属性就没有了
页面刚运行:
第一次单击:
第二次单击:
jQuery(基础dom及css操作)的更多相关文章
- jQuery基础DOM和CSS操作
$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- 基础DOM和CSS操作(三)
CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...
- 基础DOM和CSS操作(二)
元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
- 基础DOM和CSS操作(一)
DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...
- Jquery5 基础 DOM 和 CSS 操作
学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScr ...
- jQuery的基础dom和css操作
1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...
- 第 5 章 基础 DOM 和 CSS 操作
在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据.html()方法 可以获取或设置 html 内容,text()可以获取或设置文本内容. $('#box').ht ...
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
随机推荐
- FZU 1851 组合数
给你两个数n和m,然后让你求组合数C(n,m)中的质因子的个数. 这里用到的一个定理:判断阶乘n!中的质因子 i 的个数的方法---f(n!)=n/i+n/i^2+n/i^3+.....n/i^m ( ...
- java中String的21种使用方法
(构造函数必须new出来) * public String (char[] vaue) 将一个字符数组变成字符串(构造函数) * public Stri ...
- POJ2576 Tug of War 二维背包
题目大意 一群人拔河,给出每个人的重量,要求两队人数之差不超过1人,且每队总重量之差最小. 思路 选出严格总人数一半(或+1)的人为一队,在该队重量不超过所有人总重量一半的情况下,使其重量最大. 人数 ...
- Gym-100935I Farm 计算几何 圆和矩形面积交
题面 题意:就是给你一个圆,和你一个矩形,求面积并,且 保证是一种情况:三角剖分后 一个点在圆内 两个在圆外 题解:可以直接上圆与凸多边形交的板子,也可以由这题实际情况,面积等于扇形减两个三角形 #i ...
- Hdu-6230 2017CCPC-哈尔滨站 A.Palindrome Manacher 主席树
题面 题意:给你一个字符串,问你满足s[i]=s[2n-i]=s[2n+i-2]的子串(这子串长度为3n-2)有多少个,原字符串长度<=5e5 题解:对于这种子串,其实要满足2个回文,跑过一次M ...
- 给统计人讲Python(1)_科学计算库-Numpy
本地代码是.ipynb格式的转换到博客上很麻烦,这里展示部分代码,了解更多可以查看我的git-hub:https://github.com/Yangami/Python-for-Statisticia ...
- IEnumerable ICollection IList
- Dynamic编程
Dynamic Binding 动态绑定 Binding:解析Type,member,operation的过程. 动态绑定将Binding从编译时延迟到运行时进行. 场景 编译时,程序员知道特定的fu ...
- 从发请求到AJAX到同源政策
1 发请求的各种方法 使用form标签(会在当前页面刷新或者新开一个页面刷新) <form action="" method=post/get> <input ...
- 【Oracle】开、关、删归档日志(archivelog)
归档日志:当redo日志发生切换时,归档进程(ARCn)会把redo日志自动归档,产生归档日志. 1.启动归档模式 –确定数据库为非归档模式 SYS@LGR> archive log list; ...