废物学Js One day

整整一天都浪费在这两个js上了

也算总结了几个知识点

1. .index和.html的使用区别

（1） .index用于给相同标签一个数值、

（2） .html用于输出标签中的文本数值

2. function的使用

（1）可以加在head标签中，但是要在jq前面加上$(function() {//执行内容} ，该段代码的含义为在页面加在之后进行查找页面标签。

（2）也可以用script加在页面尾部，也可以$(//执行内容)直接进行填写

3. .siblings的使用

（1）修改同胞元素中其他的标签样式

（2）通常后面会跟一个 .addClass or .css

4. .eq的使用

（1）进行元素匹配今天用于变量中的字符来修改其他css样式

5. .console.log使用

（1）多用于输出页面的变量

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script>
    $(function() {
        $("#tabs ul li").click(function() { //  每个li的点击触发事件
            $(this).css('color', 'red').siblings('li').css('color', 'blue');  //  点击完成切换css样式
            var tabss = $(this).index();// #tabs 每行数组一个和下面 #tabs_com对应的数值
            $("#tabs_com ul li").eq(tabss).css('display', 'block').siblings('li').css('display', 'none');// eq方法对应数值的css显示隐藏   
        });    
         $('#tabs ul li').eq(0).click();//页面载入的时候默认点击一次0号数值
    })

    // siblings 使用方法. 修改同胞元素以外的内容
    // var tabss = $("id").index()  定义变量tabss的数值   index值从0开始
    // eq  方法  选取指定带有index值的元素
    
     </script>

        <style>
    #tabs_com ul li {
        display: none;
    }
    </style>
</head>

<body>
    <div id="tabs">
        <ul>
            <li>aaaa</li>
            <li>ssss</li>
            <li>dddd</li>
            <li>cccc</li>
        </ul>
    </div>
    <div id="tabs_com">
        <ul>
            <li>aaaa的内容</li>
            <li>ssss的内容</li>
            <li>dddd的内容</li>
            <li>cccc的内容</li>
        </ul>
    </div>
</body>

</html>

辛苦了Hook_LiFe 我不是不用心也不是不能吃苦可能我大概真的脑子有些问题吧走一步算一步慢慢来。

posted @ 2015-09-26 00:00 Yuki丶阅读(81) 评论(0) 收藏举报

Yuki丶

废物学Js One day

公告