$工具, 属性, 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>
随机推荐
- MAC使用Scrapy遇到的坑
MAC版本:EI Captain Python版本: 2.7.10 MAC默认没有安装pip,所以首先 sudo easy_install pip 然后安装Scrapy: sudo pip insta ...
- 网络流 A - PIGS POJ - 1149 最大流
A - PIGS POJ - 1149 这个题目我开始感觉很难,然后去看了一份题解,写的很好 https://wenku.baidu.com/view/0ad00abec77da26925c5b01c ...
- Kubernetes笔记（二）：了解k8s的基本组件与概念
前文 Kubernetes笔记(一):十分钟部署一套K8s环境 介绍了如何快速搭建一个k8s系统.为了继续使用k8s来部署我们的应用,需要先对k8s中的一些基本组件与概念有个了解. Kubernete ...
- 前端福利，用 JS 就能实现抖音养号等诸多功能
我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完 ...
- Qt保持窗口在最上方
原文:https://blog.csdn.net/hl1hl/article/details/85244451 前言 在Qt开发桌面软件的过程中,根据开发的需求不同,我们经常需要将弹出窗口,一般常见的 ...
- IE浏览器下报错： strict 模式下不允许一个属性有多个定义
vue项目,打包后在IE11和360浏览器(都是IE内核)上运行,控制台报了strict 模式下不允许一个属性有多个定义这个错误,导致流程不能正常走下去,查资料后知道应该是定义了重复的属性,于是就开始 ...
- 解决：idea中右键项目找不到subversion
2019.02版IDEA,刚刚发现更新不了项目,但是我记得之前的项目是可以直接更新的.然后,我打开之前的项目找到相关项,对比了一下,找到了方法: file--settings--Version Con ...
- 错误提示 Table '.***_ecms_news_data_' doesn't exist select keyid,dokey,newstempid,closepl,info
错误提示:Table '**.***_ecms_news_data_' doesn't exist select keyid,dokey,newstempid,closepl,infotags,wri ...
- kubernetes部署redis主从高可用集群
1.redis主从高可用集群结构 2.k8s部署有状态的服务选择 对于K8S集群有状态的服务,我们可以选择deployment和statefulset statefulset service& ...
- 用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...