$工具, 属性, TAB点击切换
$工具方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09_$工具方法</title>
</head>
<body>
<!--
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. $.each(): 遍历数组或对象中的数据
var obj = {
name: 'Tom',
setName: function (name) {
this.name = name
}
}
$.each(obj, function (key, value) {
console.log(key, value)
}) //2. $.trim(): 去除字符串两边的空格
//3. $.type(obj): 得到数据的类型
console.log($.type($)) // 'function' 函数 //4. $.isArray(obj): 判断是否是数组，$.isArray($('body')伪数组
console.log($.isArray($('body')), $.isArray([])) // false true //5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($)) // true //6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.log($.parseJSON(json)) json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.log($.parseJSON(json)) /*
JSON.parse(jsonString) json字符串--->js对象/数组
JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串
*/
</script>
</body>
</html>
属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_属性</title>
</head>
<body> <div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul> <input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button> <!--
1. 操作任意属性
attr()
removeAttr()
prop()
2. 操作class属性
addClass()
removeClass()
3. 操作HTML代码/文本/值
html()
val()
--> <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 读取第一个div的title属性
2. 给所有的div设置name属性(value为atguigu)
3. 移除所有div的title属性
4. 给所有的div设置class='guiguClass'
5. 给所有的div添加class='abc'
6. 移除所有div的guiguClass的class
7. 得到最后一个li的标签体文本
8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
9. 得到输入框中的value值
10. 将输入框的值设置为atguigu
11. 点击'全选'按钮实现全选
12. 点击'全不选'按钮实现全不选
*/
//1. 读取第一个div的title属性
// console.log($('div:first').attr('title')) // one //2. 给所有的div设置name属性(value为atguigu)
// $('div').attr('name', 'atguigu') //3. 移除所有div的title属性
// $('div').removeAttr('title') //4. 给所有的div设置class='guiguClass'
//$('div').attr('class', 'guiguClass') //5. 给所有的div添加class='abc'
//$('div').addClass('abc') //6. 移除所有div的guiguClass的class
//$('div').removeClass('guiguClass') //7. 得到最后一个li的标签体文本
//console.log($('li:last').html()) //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
//$('li:first').html('<h1>mmmmmmmmm</h1>') //9. 得到输入框中的value值
//console.log($(':text').val()) // 读取 //10. 将输入框的值设置为atguigu
//$(':text').val('atguigu') // 设置 读写合一
//11. 点击'全选'按钮实现全选
// attr(): 操作属性值为非布尔值的属性
// prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function () {
$checkboxs.prop('checked', true)
}) //12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
$checkboxs.prop('checked', false)
})
</script>
</body>
</html>
TAB点击切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_多Tab点击切换</title>
<style>
* {
margin: 0;
padding: 0;
} #tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
} #container {
position: relative;
} #content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
} #tab1, #content1 {
background-color: #ffcc00;
} #tab2, #content2 {
background-color: #ff00cc;
} #tab3, #content3 {
background-color: #00ccff;
}
</style>
</head>
<body>
<h2>多Tab点击切换</h2> <ul id="tab">
<li id="tab1" value="1">10元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul> <div id="container">
<div id="content1">
10元套餐详情：<br/> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2" style="display: none">
30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3" style="display: none">
50元包月详情：<br/> 每月无限量随心打
</div>
</div> <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript"> var $contents = $('#container>div')
// 给3个li加监听
/*$('#tab>li').click(function () { // 隐式遍历
//alert('----')
// 隐隐藏所有内容div
$contents.css('display', 'none')
// 显示对应的内容div
// 得到当前点击的li在兄弟中下标
var index = $(this).index()
// 找到对应的内容div, 并显示
$contents[index].style.display = 'block'
// $($contents[index]).css('display', 'block')
})*/ var currIndex = 0 //当前显示的内容div的下标
$('#tab>li').click(function () { // 隐式遍历
//alert('----')
// 隐藏当前已经显示的内容div
$contents[currIndex].style.display = 'none'
// 显示对应的内容div
// 得到当前点击的li在兄弟中下标
var index = $(this).index()
// 找到对应的内容div, 并显示
$contents[index].style.display = 'block' // 更新下标
currIndex = index
}) </script>
</body>
</html>
随机推荐
- Python高级编程-Python一切皆对象
Python高级编程-Python一切皆对象 Python3高级核心技术97讲 笔记 1. Python一切皆对象 1.1 函数和类也是对象,属于Python的一等公民 ""&qu ...
- ArcMap 0 （ArcGIS10.2安装）
一如GIS深似海,从此相逢是故人(这句话适合初步接触GIS的,我算是初窥门径.还是道行太浅,只是多了感慨) 前言: 1. 本人GIS专业,对于ArcGIS较为熟悉.由于专业和其它经历需要,接触过不少各 ...
- python学习笔记 Day4
1.函数返回值分析 li = [1,2,3,4] li2 = [1,2,3,4] def f1(args): args.append(55) li = f1(li) print(li) f1(li2) ...
- JVM系列-2、JVM内存结构
一.JVM内存结构 1.1.栈(JVM Stacks) 存放局部变量(定义在方法中的变量和定义在方法参数列表上的变量).对象引用(reference类型,它不等同于对象本身,根据不同的虚拟机实现,它可 ...
- 在Maven项目中添加代码目录下的配置文件
问题 Maven 是约定大于配置的一种工具, 通常约定在 src/main/resources 目录下放配置文件, 当我们想要在 src/main/java 代码目录下放置配置文件用来测试, Mave ...
- Bootstrap初识
目录 概述 快速入门 响应式布局 CSS样式和JS插件 全局CSS样式 组件 插件 案例:黑马旅游网 概述 概念:一个前端开发的框架,Bootstrap是美国Twitter公司的设计师Mark Ott ...
- 201771010113 李婷华 《面向对象程序设计（Java）》第十六周总结
一.理论知识部分 1.程序是一段静态的代码,它应用程序执行蓝 是一段静态的代码,它应用程序执行蓝 是一段静态的代码,它应用程序执行蓝本. 2.进程是程序的一次动态执行,它对应了从代码加载.执行至执行完 ...
- LeetCode--Unique Email Addresses & Hamming Distance (Easy)
929. Unique Email Addresses (Easy)# Every email consists of a local name and a domain name, separate ...
- LeetCode--To Lower Case && Remove Outermost Parentheses (Easy)
709. To Lower Case(Easy)# Implement function ToLowerCase() that has a string parameter str, and retu ...
- 【FPGA篇章七】FPGA系统任务：详述常用的一些系统函数以及使用方法
欢迎大家关注我的微信公众账号,支持程序媛写出更多优秀的文章 系统任务和系统函数是Verilog标准的一部分,都以字符"$"为开头.系统任务可划分为六类,下面分别给出一些常用任务的用 ...