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; }) //获取属性值: $('') ...
随机推荐
- Codeforces444A_DZY Loves Physics
DZY Loves Physics time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- Linux黑洞
1 什么是Linux黑洞 在Linux系统中,/dev/null是一个虚设的设备.俗称"Linux黑洞". 不论什么对/dev/null的写入都会成功.但数据会消失得无影无踪.没有 ...
- MySQL主从复制和读写分离
我们知道应用对数据库的訪问通常情况下大部分都是读操作,写仅仅占非常少一部分.因此读写分离(read-write-splitting)能有效减少主库压力,从而解决站点发展过程中遇到的第一次数据库瓶颈. ...
- Swift - 可编辑表格样例(可直接编辑单元格中内容、移动删除单元格)
(本文代码已升级至Swift3) 本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...
- springboot与mybatis集成
1)添加依赖 <!-- mybatis --> <dependency> <groupId>org.mybatis.spring.boot</groupId& ...
- java selenium手动最大化chrome浏览器的方法
package my_automation; import java.awt.Dimension; import org.openqa.selenium.Capabilities; import or ...
- Monad 系列
本系列是在学习Monad时在网上找到的一个老外的博客,作者是MikeHadlow,地址是mikehadlow.blogspot.com, 可惜国内访问不了.这个系列对Monad讲解的浅显易懂,而且有 ...
- Android一对多蓝牙连接示例APP
一对多蓝牙连接示例,基于Google BluetoothChat修改,实现一对多聊天(一个服务端.多个客户端),类似聊天室. 主要功能: 客户端的发出的消息所有终端都能收到(由服务端转发) 客户端之间 ...
- 智能家居控制APPUI界面设计
2017年,随着智能化产业进入新的市场格局,千家品牌实验室也迎来全新的升级,致力为智能产业生态链提供更全更新更深度的行业分析和品牌数据监测服务.本文为大家带来关于中国智能家居行业发展APP设计欣赏. ...
- C#自定义控件实现控件随窗口大小改变
1.新建用户控件,取名MyForm. 2.将默认的UserControl改成Form 3.在类中添加以下代码 private float X, Y; //获得控件的长度.宽度.位置.字体大小的数据 p ...