web - $ and jQuery

According to notes Shiqianfeng educational video to learn the exercises | learn some time, I have to write a little something necessary ???

We know that in jQuery, the $ is jQuery alias, then we can do a lot of things through $.

1. First, we will be able to select elements on a page by $.

1) Consider a page ul, under several li ul.

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

2) Next, we use $ to select all li.

<script src="jquery-3.4.1.min.js"></script>
<script>
    $('li').html('li');
    //调用html方法进行设定
    
</script>

3) a page long run, the whole thing inside li li have become a:

2. $ do things after the selected element

First, it can operate many properties (html, val, prop, attr, class), in addition, it allows elements have some animation effects, we can traverse other elements related to this element of the elements dom operation (add / remove elements), and the binding Ajax and events, we come one by one to see.

2.1.1 first operated properties: html

1) and is set to take html

<script src="jquery-3.4.1.min.js"></script>
<script>
    alert($('ul').html());
    //调用函数的时候不传参数,这样的话就能得到ul的html
</script>

2) to refresh the page, you can see at ul html to get:


2.1.2 Operation attribute:. Val

1) value val content acquisition and set input tag

<input type="text"/>
<script src="jquery-3.4.1.min.js"></script>
<script>
//选定input,为它加一个监听事件
    $('input').keyup(function(){
    alert($(this).val());
    })
</script>

2) At this page there will be a value, a character from the keyboard passing a, we get the value a:

3) If I want to set val, I would like to add some character after the value: In the last plus a fixed unit, px

<script>
    $('input').keyu p(function(){
        var v = $(this).val();
        $(this).val(v + 'px');  
        })
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191008120526427-1138520452.png)

4) In order to avoid repetition px added. Be a judge, currently last two characters are the characters px, we can not add, otherwise add

<script>
    $('input').keyu p(function(){
        var v = $(this).val();
        //截取最后两个字符串
        if(v.slice(-2)!=='px'){
            $(this).val(v + 'px');
        })
</script>
![](https://img2018.cnblogs.com/blog/1817586/201910/1817586-20191008120630410-1091569163.png)

2.1.3. Property and attribute properties

The former is dom node object attribute tree constituency, which is the property of the label. Generally speaking, these two attribute values ​​correspond, class Name of the class attribute of the property, they are different is called, the value is the same. These two properties are generally regarded as not to do.

1) but checkbox property is to be distinguished

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <input type="text"/>
    <label>选中<input type="checkbox" checked="checked"></label>
        <!--checked默认勾选-->
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $('input').keyup(function(){
            var v = $(this).val();
            if(v.slice(-2)!=='px'){
                $(this).val(v + 'px');
                }
            })
            
        //添加input的change事件
        $('input[type=checkbox]').change(function(){//监听change事件
            console.log($(this).attr('checked'));
        })
    </script>
</body>

Refresh the page, press the F12, no matter how click Select, you will find all checkbox:

2) Once we have set the default value, checked attribute attr no longer be used. This time with propoty to determine whether the current is selected, and should be judged by this property should not be selected.

The code above is modified:

//console.log($(this).attr('checked'));
console.log($(this).prop('checked'));

This time back to the browser, press the F12, see uncheck check return true return false:


2.1.4. Finally, four methods on classes

addClass added to the elements of a class, removeClass and opposite to it. hasClass determines the class exists in the element, toggleClass for switching classes.

1) Suppose there is a div on my page, now to add style

<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        cursor: pointer;
    }
    .play{
        background-color: pink;
    }
    .pause{
        background-color: #87CEEB;
    }
</style>

<body>
    <div class="pause"></div>
    <!--添加默认class.效果:在两个状态之间切换。
    点击div,从暂停变为播放,再点击,从播放变为暂停-->
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        $('input').keyup(function(){
            var v = $(this).val();
            if(v.slice(-2)!=='px'){
                $(this).val(v + 'px');
            }
        })
            
        $('input[type=checkbox]').change(function(){
            console.log($(this).prop('checked'));
        })
            
        //绑定div的绑定事件
        $('div').click(function(){
            //将pause进行toggle.当元素中有这个类就删除,否则添加
            $(this).toggleClass('pause');
            $(this).toggleClass('play');
            // 经过这个操作,就能来回切换啦
        })
    </script>
</body>

Pause before you click is the default state (green), switch to the playback status (pink) Click



Guess you like

Origin www.cnblogs.com/hefeifei/p/11634738.html