文档章节

jQuery 测试案例(二)

519617
 519617
发布于 2016/05/11 10:45
字数 593
阅读 5
收藏 0

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#addClassTest").click(function(){
    $("#testDiv").addClass("class01 class02");
  });
  $("#removeClassTest").click(function(){
    $("#testDiv").removeClass("class02");
  });
  $("#toggleClassTest").click(function(){
    $("#testDiv").toggleClass("class02");
  });
  $("#cssTest").click(function(){
    $("#testDiv").css("background-color","green");
  });
  //css size
  $("#sizeTest").click(function(){
    var sWidth = $("#sizeTestDiv").width();
    var sInnerWidth = $("#sizeTestDiv").innerWidth();
    var sOuterWidth = $("#sizeTestDiv").outerWidth();
    var sHeight = $("#sizeTestDiv").height();
    var sInnerHeight = $("#sizeTestDiv").innerHeight();
    var sOuterHeight = $("#sizeTestDiv").outerHeight();
    $("#sizeTestDiv").html("width="+sWidth + "____innerWidth="+sInnerWidth +"____outerWidth="+sOuterWidth +"<br>height="+sHeight+ "____innerHeight="+sInnerHeight +"____outerHeight="+sOuterHeight);
  });
  //iterator
  $("#getUlParentTest").click(function(){
    $("#iterTestUl").parent().css("border-color","red");
  });
  $("#getLiParentTest").click(function(){
    $("#iterTestLi").parent().css("border-color","blue");
  });
  $("#getSpanParentTest").click(function(){
    $("#iterTestSpan").parent().css("border-color","green");
  });
  $("#getSpanParentsTest").click(function(){
    $("#iterTestSpan").parents().css("border-color","black");
  });
  $("#getDivChildTest").click(function(){
    $("#iterTestDiv").children().css("border-color","red");
  });
  $("#getUlChildTest").click(function(){
    $("#iterTestUl").children().css("border-color","blue");
  });
  $("#getLiChildTest").click(function(){
    $("#iterTestLi").children().css("border-color","green");
  });
  $("#getDivChildsTest").click(function(){
    $("#iterTestDiv").find("*").css("border-color","black");
  });
  $("#getSpanSiblingsTest").click(function(){
    $("#iterTestSpan02").siblings().css("border-color","red");
  });
  $("#getSpanNextTest").click(function(){
    $("#iterTestSpan02").next().css("border-color","blue");
  });
  $("#getSpanNextAllTest").click(function(){
    $("#iterTestSpan02").nextAll().css("border-color","green");
  });
  $("#getPFirstTest").click(function(){
    $("#iterTestDiv02 p").first().css("border-color","purple");
  });
  $("#getPLastTest").click(function(){
    $("#iterTestDiv02 p").last().css("border-color","yellow");
  });
  $("#getPEqTest").click(function(){
    $("#iterTestDiv02 p").eq("1").css("border-color","yellowgreen");
  });
  $("#getPFilterTest").click(function(){
    $("#iterTestDiv02 p").filter(".div02p").css("border-color","SteelBlue");
  });
  $("#getPNotTest").click(function(){
    $("#iterTestDiv02 p").not("#iterTestP03").css("border-color","SpringGreen");
  });
});

</script>

<style>
.class01{
width:300px;
height:50px;
}

.class02{
background-color:yellow;
margin-left:50px;
}
</style>
</head>

<body>
<h1>css operation</h1>
<div id="testDiv">
testDiv
</div>
<br>
<button id="addClassTest" >addClass</button> &nbsp <button id="removeClassTest" >removeClass</button>  
&nbsp <button id="toggleClassTest" >toggleClass</button> &nbsp <button id="cssTest" >css:color is green</button>  

<h1>css size</h1>
<div id="sizeTestDiv" class="class02" style="border:20px solid #000;">
SizeTestDiv
</div>
<br>
<button id="sizeTest" >showSize</button>

<h1>iterator</h1>
<div id="iterTestDiv" style="border:2px solid #000;width:300px;height:200px;">div
<ul id="iterTestUl" style="border:2px solid #000;width:250px;height:160px;">ul
<li id="iterTestLi" style="border:2px solid #000;width:150px;height:60px;"> li01
<span id="iterTestSpan" style="border:2px solid #000;width:100px;height:30px;">span</span>
</li>
<li id="iterTestLi" style="border:2px solid #000;width:150px;height:60px;" > li02
<b style="border:2px solid #000;width:100px;height:30px;" >b</b>
</li>
</ul>
</div>
<br>
<button id="getUlParentTest" >getUlParent</button> &nbsp <button id="getLiParentTest" >getLiParent</button> &nbsp <button id="getSpanParentTest" >getSpanParent</button>&nbsp <button id="getSpanParentsTest" >getSpanParents</button><br><br>
<button id="getDivChildTest" >getDivChild</button> &nbsp <button id="getUlChildTest" >getUlChild</button> &nbsp <button id="getLiChildTest" >getLiChild</button> &nbsp <button id="getDivChildsTest" >getDivChilds</button><br><br>
<div id="iterTestDiv02" style="border:2px solid #000;width:300px;height:300px;">div02
<p class="div02p" id="iterTestP02" style="border:2px solid #000;width:250px;height:40px;">p02</p>
<span id="iterTestSpan02" style="border:2px solid #000;width:250px;height:40px;">span02</span>
<h1 id="iterTestH1" style="border:2px solid #000;width:250px;height:40px;">h1<h1>
<h4 id="iterTestH4" style="border:2px solid #000;width:250px;height:40px;">h4</h4>
<p class="div02p" id="iterTestP03" style="border:2px solid #000;width:250px;height:40px;">p03</p>
</ul>
</div>
<button id="getSpanSiblingsTest" >getSpanSiblings</button> &nbsp <button id="getSpanNextTest" >getSpanNext</button> &nbsp <button id="getSpanNextAllTest" >getSpanNextAll</button> <br><br>
<button id="getPFirstTest" >getPFirst</button> &nbsp <button id="getPLastTest" >getPLast</button> &nbsp <button id="getPEqTest" >getPEq</button> &nbsp <button id="getPFilterTest" >getPFilter</button> &nbsp <button id="getPNotTest" >getPNot</button><br><br>

</body>
</html>

© 著作权归作者所有

上一篇: Spring Form标签
519617
粉丝 2
博文 51
码字总数 33472
作品 0
东城
私信 提问
JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒
2018/05/08
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
jQuery基础 - 常用基本属性

jQuery简介 jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程 jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它...

ZHAO_JH
2018/07/31
17
0
使用 QUnit 进行 JavaScript 单元测试

简介 QUnit是一个强大的JavaScript单元测试框架。他可用于jQuery,jQuery UI和jQuery Mobile项目,以及任何使用JavaScript代码编写的项目的测试。 运行环境 任何Html和JavaScript编辑器(Vis...

oschina
2016/03/07
3.4K
7
21个最佳jQuery插件推荐

原文:http://www.javaeye.com/news/18996 在Javascript应用领域上,使用jQuery可以制作出非常优秀的动画效果,滑块、滑球,以及各种不同的应用。精选出21个最佳的精典案例,如果你是一个前端...

迷路的阿修罗
2010/12/15
2.3K
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部