jQuery设计思想02 | 我的日常分享

jQuery设计思想02

发表于2020-04-27更新于2020-04-27字数统计781阅读时长9分

jQuery写法

1、方法函数化
2、链式操作
3、取值赋值一体化(合体)

一、方法函数化

  1. 在js中，我们如果把js代码写在html代码之前，而且要获取到html中的元素，通常我们会写window.onload = function () {···}
    那么在jq中，将其函数化了成了$(fuction(){···});
  2. 在js中事件函数是这样的abtn.onclick = fuction(){···}，而在jq中将其函数化成了$("button").click(fuction{···})
    其他的事件也是类似的，了解这一个其他的所有事件就都会了
  3. 在js中，要修改或者获取样式时需要这样div.style.background = ···，对于获取样式来说，这个还只能获取到某个元素的行间样式，如果要获取到非行间样式的话就有几种方法了，而且还要做兼容处理
    然而jq中就很方便了只需使用css()这个方法，行间和非行间样式都能获取到
    例如，
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <style>
        div{
            background-color: green;
        }
    </style>
    <div style="font-size: 18px;">我是一个div</div>
    <script>
        console.log($("div").css("background"));
        console.log($("div").css("fontSize"));
    </script>

    注：

    css()要想修改多个样式，可通过一个对象来进行传参。
    1
    2
    3
    4
    5
    6
    7
    <script>
        $("div").css({
            "background" : "blue",
            "fontSize" : "18px",
            "color" : "orange"
        });
    </script>
    效果：
    效果

二、链式操作

如果我们要对一个对象进行多个不同的操作时，我们可以通过这个来简化代码。
例如： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>快到我碗里来！</div>
    <script>
        $("div").css({
            "background" : "blue",
            "fontSize" : "18px",
            "color" : "orange"
        });
        $("div").click(function(){
            alert("hello");
        });
        $("div").mouseover(function(){
            $(this).css("background","pink")
        });
        $("div").mouseout(function(){
            $(this).css("background","blue")
        });
    </script>

可修改为： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>快到我碗里来！</div>
    <script>
        $("div").css({
                "background": "blue",
                "fontSize": "18px",
                "color": "orange"
            })
            .click(function () {
                alert("hello");
            })
            .mouseover(function () {
                $(this).css("background", "pink")
            })
            .mouseout(function () {
                $(this).css("background", "blue")
            });
    </script>

只用将第一个语句的分号去掉，后面用.号连起来就ok了
效果是同样的：

效果

三、取值赋值一体化(合体)

jq中将取值赋值合体了，学会一个相当于学会了两个。

1. 取值

取值不传入参数就行了。
js中的innerHTMLjq中为html()
js中的valuejq中为val() 

1
2
3
4
5
6
<div>快到我碗里来！</div>
<input type="text" value="我不！">
<script>
    console.log($("div").html());
    console.log($("input").val());
</script>

效果：
效果

2. 赋值

需要传入参数 

1
2
3
4
5
6
<div>快到我碗里来！</div>
<input type="text" value="我不！">
<script>
    $("div").html("hello")
    $("input").val("world!")
</script>

效果：
效果