$工具, 属性, 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/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟

  </div>

  <div id="content2" style="display: none">

    30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟

  </div>

  <div id="content3" style="display: none">

    50元包月详情：<br/>&nbsp;每月无限量随心打

  </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>

随机推荐

JWT的浅谈
在实际工作过程中,运行jmeter脚本的时候,开发给了一个jwt的授权信息,到底是做什么用的呢,翻阅了一些资料,整理如下: 一.JWT(Json Web Token)是什么 JWT是一串格式为xxxx ...
Django model重写save方法及update踩坑记录
一个非常实用的小方法试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...
Codeforces Round #639 (Div. 2)
Codeforces Round #639 (Div. 2) (这场官方搞事,唉,just solve for fun...) A找规律给定n*m个拼图块,每个拼图块三凸一凹,问能不能拼成 n * ...
Java 四种权限修饰符
Java 四种权限修饰符访问权限 public protected (default) private 同一个类(我自己) yes yes yes yes 同一包(我邻居) yes yes yes n ...
一次内核 crash 的排查记录
一次内核 crash 的排查记录使用的发行版本是 CentOS,内核版本是 3.10.0,在正常运行的情况下内核发生了崩溃,还好有 vmcore 生成. 准备排查环境 crash 内核调试信息rpm ...
QTreeWidget更新后保存节点的展开状态
class Xx : public QWidget { Q_OBJECT struct ItemState{ ItemState(); int _id; bool _isExpend; }; publ ...
Python求差集
本月月初在职员工表(20来列,身份证.银行卡号等),本月离职员工表(10来列,计时.计件等),不考虑本月入职员工表,求下月月初在职员工表. Python,import pandas as pd,两个p ...
[hdu4576]dp
题意:1-n围成1圈,从1出发,第i次走a[i]步,问走m次后出现在[L,R]的概率L<=R. 思路:明显的DP,把编号变成0~n-1,令dp[i][j]表示走完i步之前停在了j上,则有dp[i ...
javaEE ->DBUtils&连接池
第1章 DBUtils 如果只使用JDBC进行开发,我们会发现冗余代码过多,为了简化JDBC开发,本案例我们讲采用apache commons组件一个成员:DBUtils. DBUtils就是J ...
记一条sql语句优化
傻瓜级的.此sql语句存在于分销王系统中. 查阅slow log ,时间设置1s 发现很多 SELECT r.*, goods_id, bn, name FROM sdb_goods_rate r, ...

$工具, 属性, TAB点击切换

随机推荐

热门专题