JqueryCSS操作练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">div{width:100px;height:260px;}div.border{border: 2px white solid;}div.redDiv{background-color: red;}div.blackDiv{border: 5px blue solid;}</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">$(function(){/*
CSS
css(name|pro|[,val|fn])       读写匹配元素的样式属性。 a.css('color')取出a元素的colora.css('color',"red")设置a元素的color为redCSS 类addClass(class|fn)            为元素添加一个class值;<div class="mini big">
removeClass([class|fn])     删除元素的class值；传递一个具体的class值，就会删除具体的某个classa.removeClass()：移除所有的class值**/var $divEle = $('div:first');$('#btn01').click(function(){//addClass() - 向被选元素添加一个或多个类$divEle.addClass("redDiv blackDiv");});$('#btn02').click(function(){//removeClass() - 从被选元素删除一个或多个类 $divEle.removeClass()});$('#btn03').click(function(){//toggleClass() - 对被选元素进行添加/删除类的切换操作 //切换就是如果具有该类那么删除，如果没有那么添加上$divEle.toggleClass("redDiv");});$('#btn04').click(function(){//offset() - 返回第一个匹配元素相对于文档的位置。var os = $divEle.offset();//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距alert("顶边距："+os.top+" 左边距："+os.left);//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left//offset({ top: 10, left: 30 });$divEle.offset({top:50,left:60}); });})
</script>
</head>
<body><table align="center"><tr><td><div class="border"></div></td><td><div class="btn"><input type="button" value="addClass()" id="btn01"/><input type="button" value="removeClass()" id="btn02"/><input type="button" value="toggleClass()" id="btn03"/><input type="button" value="offset()" id="btn04"/></div></td></tr></table><br /> <br /><br /> <br /></body>
</html>

Jquery基础应用练习三【javaweb】【JqueryCSS操作练习】相关推荐

java jquery基础_day20:JQuery基础(超系统的JavaWEB全套教程)
今日内容 1.JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例 JQuery 基础: 1.概念: 一个JavaScript框架.简化JS开发 jQu ...
jQuery 基础教程（三）之jQuery的选择器
一.jQuery 选择器 (1)选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 (2)jQuery 选择器的优点: 简洁的写法 ...
Linux操作系统基础解析之(三)——基本命令行操作及获得帮助的方法
我们传统意义上理解的操作系统实际上是指:包括了操作系统的kernel,以及在其上构建了大量的功能各异的应用程序的集合体.所以狭义上来讲,操作系统就是指kernel.kernel将底层的硬件的复杂逻辑屏 ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...
Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
目录 1.jquery操作样式类名代码演示二.添加元素 1.append()演示 2.prepend()演示 3.after()演示 4.before()演示三.jQuery-CSS()方法 1 ...
Jquery基础之DOM操作
Jquery基础之DOM操作 Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DO ...
java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...

Jquery基础应用练习三【javaweb】【JqueryCSS操作练习】

JqueryCSS操作练习

Jquery基础应用练习三【javaweb】【JqueryCSS操作练习】相关推荐

最新文章

热门文章