码迷，mamicode.com
首页 > Web开发 > 详细

前端基础之JQuery - day15

时间：2017-08-12 15:22:24      阅读：199      评论：0      收藏：0      [点我收藏+]

标签：响应   addclass   asc   jpg   cte   20px   nload   偶数   年龄   

写在前面

上课第15天，打卡：

　　　　张国臂掖，以通西域；

 

###########
# 课上简书 #
##########


http://jquery.cuishifeng.cn/index.html


JQuery对象：   Jquery.方法   $.方法
# Jquery和$是完全一样的


JQuery的方法只能JQuery对象调用
JS的方法只能JS使用


变量命名：
JS      var $variable = jQuery 对象
JQuery  var variable = DOM 对象


JQuery语法：$(selector).action()
    selector  选择器
    action    对标签的操作


JQuery的选择器(selector)
    基本选择器
    层级选择器
　　 ...


$(".p1").css("color","red");
JQuery 选择器选到的是一个集合对象(一组标签)，后面的操作会循环加载；

但是JS不支持，JS必须自己写循环处理；


JQuery支持链式操作


JQuery固有属性  --> prop
    input type="checked"
    selected=selected
自定义的属性     --> attr


clone

　　

参考：http://www.cnblogs.com/yuanchenqi/articles/6936986.html

一、JQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象;
jQuery 对象是 jQuery 独有的.;
如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

　　

$("#test").html() 
   
         意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

         这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

         虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

         约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

　　

 jquery的基础语法：$(selector).action()     

 参考：http://jquery.cuishifeng.cn/

　

二、JQuery查找元素

　　1.选择器

基本选择器
$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")


层级选择器
$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")


基本筛选器
$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")


属性选择器
$(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)


表单选择器      
$("[type=‘text‘]")     ---可简写成-->$(":text")     
// 注意只适用于input标签  : $("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--首先引入Jquery库-->
    <script src="jquery-3.1.1.js"></script>

</head>
<body>

<!--<span>span</span>-->

<!--<p>ppp</p>-->
<!--<p class="p1">ppp</p>-->
<!--<p class="p1">ppp</p>-->

<!--<div id="d1">DIV</div>-->

<!--++++++++++-->


<div class="outer">
    <p>p1</p>
    <div class="inner">
        <p>p2</p>
    </div>
</div>
<p>p3</p>
<a href="">click</a>
<p>p4</p>


<div egon="xialv">11</div>
<div egon="xialv2">22</div>


<input type="checkbox">
<input type="text">

<script>
//基本选择器
//    $("span")
//    $("*")
//    $(".p1").css("color","red");
//    $("#d1").css("color","blue");

//    $(".class,p,div")  // 多元素选择器


//层级选择器
    // 后代选择器
//    $(".outer p").css("color","red");

    // 子代选择器
//    $(".outer>p").css("color","red");

    // 毗邻选择器 (紧挨着的兄弟标签)
//    $(".outer+p").css("color","red");

    // 兄弟选择器 (所有的兄弟标签)
//    $(".outer~p").css("color","red");


//属性选择器
    // 自定义属性
    $("[egon]").css("color","green");

    $("[egon=‘xialv2‘]").css("color","green");


//表单选择器
    $("[type=‘text‘]").css("border","1px solid red");
    // 可以简写成如下形式，仅适用于input标签
    $(":text").css("border","1px solid red");


</script>
</body>
</html>

　　2.表单属性选择器

    :enabled
    :disabled
    :checked
    :selected
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
    <!--<input type="checkbox" value="123">-->
    <!--<input type="checkbox" value="456" checked>-->
  <select id="sel">
      <option value="1" selected="selected">Flowers</option>
      <option value="2">Gardens</option>
      <option value="3">Trees</option>
      <option value="4">Fruits</option>
  </select>
</form>
<script src="jquery-3.1.1.js"></script>
<script>
//    $("input:checked").each(function(){
//        console.log($(this).val())
//    })
//     console.log($("input:checked").length);     // 1

    console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
    $("option:selected").each(function () {
        console.log("--> " + $(this).val());
    })
    $("#sel").change(function () {
        console.log($(this).val());
    })

</script>
</body>
</html>

　　3.筛选器

# 过滤筛选器
$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul class="outer">
    <li class="item">11</li>
    <li class="item">22</li>
    <li class="item">33</li>
    <li class="item">44</li>
    <li class="item">55</li>
    <li class="item">66</li>
    <li class="item">77</li>
    <li class="item">88</li>
    <li class="item">99</li>
    <li class="item">1010</li>
</ul>
<script>
    // eq 索引
//    $("ul li").eq(4).css("color","red");  // 推荐
//    $("ul li:eq(4)").css("color","red");  // 需要自己拼接字符串，比较麻烦

    $("ul li").first().css("color","red");
    $("ul li:lt(5)").css("color","red");
    $("ul li:gt(5)").css("color","red");
    $("ul li:even").css("color","red");     // 奇数
    $("ul li:odd").css("color","red");      // 偶数
</script>
</body>
</html>



# 导航查找(查找筛选器)

 查找子标签：         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   
 查找所有兄弟标签：    $("div").siblings()  
              
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil() 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>

<div class="item1">11</div>
<div class="item2">22</div>
<div class="item3">33</div>
<div class="item4">44</div>
<div class="item5">55</div>

<div class="outer">
    <div class="inner">
        <p id="p1">p1</p>
    </div>
    <p>p2</p>
</div>
<p>p3</p>

<script>
    // 向下查找兄弟标签
//    $(".item1").next().css("color","red");
//    $(".item1").nextAll().css("color","red");
//    $(".item1").nextUntil(".item5").css("color","red");

    // 查找所有兄弟标签
    $(".item3").siblings().css("color","red");

    // 查找子代标签
//    $(".outer").children().css("color","red");
    $(".outer").children("p").css("color","red");
    // 查找后代标签
    $(".outer").find("p").css("color","red");

    // 查找父标签
    $("#p1").parent().css("color","red");
    $("#p1").parents().css("color","red");
    $("#p1").parentsUntil(".outer").css("color","red");

</script>
</body>
</html>

 

三、JQuery操作元素

　　1.JQuery事件

# 页面载入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
        // 对应 JS 的onload事件
//        $(document).ready(function () {
//            $(".p1").css({"color":"red","font-size":"50px"});
//        });
        // 可以简写成如下形式：
        $(function () {
            $(".p1").css("color","blue");
        })
    </script>
</head>
<body>

<p class="p1">PPP</p>

</body>
</html>



# 事件绑定

//JS事件绑定：     js的标签对象.on事件=函数
//JQuery事件绑定： $().事件(函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
    <li>44</li>
    <li>55</li>
</ul>

<button>ADD</button>
<script>
    $("button").click(function () {
        $("ul").append("<li>666</li>");
    });

    //JS事件绑定：     js的标签对象.on事件=函数
    //JQuery事件绑定： $().事件(函数)

    // 给 li 绑定点击事件(第一种绑定方式)，点击一次就执行相关操作
    // 但是 button 增加的li点击不生效
    $("ul li").click(function () {
        console.log($(this).text());
        alert(123);
    });

    // 第二种绑定方式
    // on方法实现事件绑定  (JQuery 3 里统一用on)
    $("ul li").on("click",function () {
        alert(456);
    });


    // 事件委派 -> ul 把事件下发到子标签li
    // 这样写会避免新添加的子标签无法响应事件的bug
    $("ul").on("click","li",function () {
        console.log($(this).text());  // 获取li标签里写好的值
        alert(789);
    })
    // 要注意 on 前面是什么，以及on的参数

</script>
</body>
</html>

# 关于事件委派：
$("").on(eve,[selector],[data],fn) 
在选择元素上绑定一个或多个事件的事件处理函数。



# 事件切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>

<div class="test"></div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
    // 第一种方式
    function enter(){
        console.log("enter")
    }
    function out(){
        console.log("out")
    }
    $(".test").hover(enter,out)
    
    // 第二种方式
    $(".test").mouseenter(function(){
            console.log("enter")
    });
    $(".test").mouseleave(function(){
        console.log("leave")
    });
</script>
</html>

　　2.JQuery属性操作

--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])

---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})

　　

# attr 和 prop

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

　　

 

# 文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>

<div class="c1">
    <p>DIV-PPP</p>
</div>


<input type="text" id="inp" value="123">

<p class="p1" value="standby">PPP</p>

<script>
    console.log($(".c1").html());   // <p>DIV-PPP</p>
    console.log($(".c1").text());   // DIV-PPP

    $(".c1").html("<b>LIU</b>");    // LIU

    console.log($("#inp").val());   // 123
    $("#inp").val(999);
    console.log($("#inp").val());   // 999

    // p标签没有value属性，是自己加的属性，用val()是获取不到的；可以用attr
    console.log($(".p1").val());

    // 设置CSS样式
    $(".p1").css({"color":"red","fontSize":"35px"})
</script>

</body>
</html>

　　

# JQuery重写 左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .item {
            margin: 20px;/*上 下 左 右*/
        }
        .left_menu {
            width: 20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .title {
            text-align: center;
            background-color: #53e3a6;
            line-height: 30px;
            color: red;
        }
        .hidden {
            display: none;
        }
        .content_menu {
            width: 80%;
            height: 500px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="left_menu">
            <div class="item">
                <div class="title">菜单一</div>
                <div class="con">
                    <p>111</p>
                    <p>112</p>
                    <p>113</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单二</div>
                <div class="con hidden">
                    <p>211</p>
                    <p>212</p>
                    <p>213</p>
                </div>
            </div>
            <div class="item">
                <div class="title">菜单三</div>
                <div class="con hidden">
                    <p>311</p>
                    <p>312</p>
                    <p>313</p>
                </div>
            </div>
        </div>
        <div class="content_menu"></div>
    </div>

<script>
    $(".title").click(function () {
//        $(this).next().removeClass("hidden");
//        $(this).parent().siblings().children(".con").addClass("hidden");

        // JQuery 支持链式操作，所以上面两句可以简写为下面一句：
        $(this).next().removeClass("hidden").parent().siblings().children(".con").addClass("hidden");
    })
</script>
</body>
</html>

　　

# JQuery 重写 表格全选、反选、取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>

<button>全选</button>
<button>反选</button>
<button>取消</button>

<table border="1">
    <tr>
        <th>   </th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>

<script>
    $("button").click(function () {
        if ("全选" == $(this).text())
        {
            $("input").prop("checked",true);
        }
        else if ("取消" == $(this).text())
        {
            $("input").prop("checked",false);
        }
        else
        {
            $("input").each(function () {
                $(this).prop("checked",!$(this).prop("checked"));
            })
        }
    })
</script>

</body>
</html>

　　

# Jquery实现 tab切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .outer {
            width: 60%;
            height: 300px;
            background-color: wheat;
            margin: 100px auto;
        }
        .outer ul.title {
            background: darkgrey;
            padding: 10px;
        }
        .outer ul.title li {
            display: inline-block;
            list-style: none;
            padding: 5px;
        }
        .hide {
            display: none;
        }
        .outer .content {
            padding: 20px;
        }
        .active {
            background-color: red;
            color: white;
            border-top: 3px solid blue;
        }
    </style>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <div class="outer">
        <ul class="title">
            <li class="active" relation="c1">商品介绍</li>
            <li relation="c2">商品规格</li>
            <li relation="c3">售后保障</li>
        </ul>
        <div class="content">
            <div class="item" id="c1">这里是商品介绍</div>
            <div class="item hide" id="c2">这里是商品规格</div>
            <div class="item hide" id="c3">售后服务在这里</div>
        </div>
    </div>

    <script src="jquery-3.1.1.js"></script>
    <script>
        $(".title li").click(function () {
            // 更改 title 的背景色
            $(this).addClass("active");
            $(this).siblings().removeClass("active");

            // 更改title对应的content显示
            // 通过在 li 标签里埋了一个自定义属性，对应到content里面id值
            var $id_val = $(this).attr("relation");
            var $sel = "#" + $id_val;    // 拼接字符串
            $($sel).removeClass(‘hide‘);
            $($sel).siblings().addClass(‘hide‘);
        })
    </script>

</body>
</html>

　　3.JQuery each循环

<!--循环方式1: $.each(obj,func(){})-->
<script>
    // JQuery遍历数组
    var arr = [11,22,33,44];
    $.each(arr,function (i,j) {
        console.log(i); // 索引
        console.log(j); // 值
//        console.log(arr[i]);    // 值
    });

    // JQuery遍历object
    // 支持类似字典的数据类型，实际是object对象
    var info = {"name":"egon","age":18,"gender":"male"};
    $.each(info,function (i,j) {
        console.log(i);
        console.log(j);
    })

</script>




<!--循环方式2: $("").each(func(){})-->
<body>

<p class="item">P1</p>
<p class="item">P2</p>
<p class="item">P3</p>
<p class="item">P4</p>
<script>
    // JQuery遍历标签
    $(".item").each(function () {
        if ($(this).text()=="P3")
        {
            console.log($(this).text());
            console.log($(this).html());
            $(this).css({"color":"red","font-size":"20px"})
        }
    })
</script>
</body>

　　

# each循环扩展

# 示例1
<script>
    function f(){

        for(var i=0;i<4;i++){
            if (i==2){
                return
            }
            console.log(i)
        }
    }
    f(); // 输出 0 和 1
</script>



# 示例2
<script src="jquery-3.1.1.js"></script>
<script>
    li=[11,22,33,44];
    $.each(li,function(i,v){
        if (v==33){
//            return ;      // 输出 11 22 44
//            return true;  // 输出 11 22 44
            return false    // 输出 11 22
        }
        console.log(v)
    });
</script>




function里的return只是结束了当前的函数,并不会影响后面函数的执行；
如果你想return后下面循环函数继续执行,那么就直接写return或return true
如果你不想return后下面循环函数继续执行,那么就直接写return false

　　4.文档节点处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

　　

# 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer {
            width: 500px;
            height: 300px;
            background-color: wheat;
            margin: 100px auto;
        }
    </style>
</head>
<body>
<div class="outer">
    <h4>hello node</h4>
</div>

<button class="add-node">ADD</button>
<button class="del-node">DEL</button>


<div class="box">
    <p class="p1">PPP</p>
</div>

<div class="outerBox">
    <div></div>
</div>

<script src="../jquery-3.1.1.js"></script>

<script>
    $(".add-node").click(function () {
        var $ele_p = $("<p>");
        $ele_p.text("--->ppp");
        // 添加子标签
        $(".outer").append($ele_p);
        // 等价于下面这种写法:
//        $ele_p.appendTo(".outer");

//        // 添加兄弟标签
//        $(".outer").after($ele_p);
        // 等价于下面这种写法:
//        $ele_p.insertAfter(".outer");// 类似于appendTo()
//
//        // 清空标签
//        $(".box").empty();
//
//        // 删除标签
//        $(".box").remove();
//
//        // 复制标签
//        var $p1_clone = $(".p1").clone();
//        $(".box").append($p1_clone);

    })
</script>

</body>
</html>
# 节点clone示例

<body>
<div class="outer">
    <div class="box">
        <button class="add">+</button>
        <input type="text" placeholder="请输入..." id="line">
    </div>
</div>

<script>
    $(".add").click(function () {
//        var $new_box = $(".box").clone();  // 错误
        var $new_box = $(this).parent().clone();
//        $new_box.children("button").attr("class","to_remove");
//        $new_box.children("button").html("-");

        // 可以简写成下面这一句：
        $new_box.children("button").html("-").attr("class","to_remove");

        $(".outer").append($new_box);
    });
    // 这样写是不生效的，需要改成事件委派的形式
//    $(".to_remove").click(function () {
//        var $ele_del = $(this).parent();
//        console.log($ele_del);
////        $ele_del.remove();
//    })

    // 事件委派 -> 解决新添加的标签事件绑定失败的问题
    $(".outer").on("click",".to_remove",function () {
        var $ele_del = $(this).parent();
        console.log($ele_del);
        $ele_del.remove();
    })
</script>
</body>

　　5.动画效果

# 显示和隐藏

<body>
<p>hello egon</p>
<button id="hide_btn">隐藏</button>
<button id="show_btn">显示</button>
<button id="toggle_btn">Toggle</button>

<script src="jquery-3.1.1.js"></script>
<script>
    $("#hide_btn").click(function () {
//        $("p").hide();
//        $("p").hide(1000);

        // 添加回调函数
        $("p").hide(1000,function () {
            alert(123);
        });
    });
    $("#show_btn").click(function () {
//        $("p").show();
        $("p").show(1000);
    });
    $("#toggle_btn").click(function () {
//        $("p").toggle();
        $("p").toggle(1000);
    });
</script>
</body>

　　

# 滑动滑出

<body>

<img src="tsl.jpg"  class="tsl">
<button class="slide_out">滑出</button>
<button class="slide_in">滑出</button>
<button class="switch">切换</button>

<script src="jquery-3.1.1.js"></script>
<script>
    $(".slide_out").click(function () {
        $(".tsl").slideDown(1000); // 1000 ms 完成
    })
    $(".slide_in").click(function () {
        $(".tsl").slideUp(1000);
    })
    $(".switch").click(function () {
        $(".tsl").slideToggle(1000);
    })
</script>
</body>

　　

# 淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        .item {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>

<div class="item"></div>
<button class="fade_in">淡入</button>
<button class="fade_out">淡出</button>
<button class="fade_switch">切换</button>

<script>
    $(".fade_in").click(function () {
        $(".item").fadeIn(3000);
    });
    $(".fade_out").click(function () {
        $(".item").fadeOut(3000);
    });
    $(".fade_switch").click(function () {
        $(".item").fadeToggle(3000);
    });
</script>

</body>
</html>

　　

# CSS位置操作

$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])





# CSS尺寸操作

$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

 

四、实用例子

 

 

 

 

五、day15课后作业

题目要求

 

代码实现

 

前端基础之JQuery - day15

标签：响应   addclass   asc   jpg   cte   20px   nload   偶数   年龄   

原文地址：http://www.cnblogs.com/standby/p/7296251.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！