# JQuery

> jQuery 是一个 JavaScript 函数库。
>
> jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
>
> jQuery 库包含以下功能：
>         HTML 元素选取
>         HTML 元素操作
>         CSS 操作
>         HTML 事件函数
>         JavaScript 特效和动画
>         HTML DOM 遍历和修改
>         AJAX
>         Utilities
> 提示： 除此之外，jQuery 还提供了大量的插件。

```html

```

- hide()

- show()

```html
  <button onclick="$(this).hide()">点我</button>
  <button onclick="$(this).show()">点我</button>
  ```

## JQuery事件

```html
<!--JQuery 事件

鼠标事件	            键盘事件	      表单事件	文档/窗口事件
click	            keypress      submit	load
dblclick 双击	    keydown	      change	resize
mouseenter	        keyup	      focus	    scroll
mouseleave	 	                  blur	    unload
hover
-->

<button id="id11">id11点击警告</button>
<br>
```

## JQuery动画效果

### fade

- fadeIn()

- fadeOut()
- fadeToggle()
- fadeTo()

```html
		
        
        <div style="background-color: bisque">
            <script>
                $(function () {
                    $("#id13").click(
                        function (){
                            $("#id12").hide()
                        }
                    );
                    $("#id14").click(
                        function () {
                            $("#id12").show()
                        }
                    );
                });
            </script>
            <p id="id12">id12内容</p>
            <button id="id13">点击隐藏id12点击隐藏</button>
            <br>
            <button id="id14">点击显示id12点击显示</button>
        </div>

```

<div style="background-color: bisque">
    <script>
        $(function () {
            $("#id13").click(
                function (){
                    $("#id12").hide()
                }
            );
            $("#id14").click(
                function () {
                    $("#id12").show()
                }
            );
        });
    </script>
    <p id="id12">id12内容</p>
    <button id="id13">点击隐藏id12点击隐藏</button>
    <br>
    <button id="id14">点击显示id12点击显示</button>
</div>

```html
		<div>
            <script>
                $(function () {
                    $("#id15").click(
                        function (){
                            $("#img2").fadeToggle();
                            $("#img3").fadeIn("slow");
                            $("#img4").fadeOut(3000)
                            $("#img5").fadeTo("quick",0.5)
                        }
                    )
                })

</script>

<button id="id15">点击淡入</button><br>
            <img style="height: 50px ; display: none" id="img2" src="269-2693391_mysql-mysql-logo-png-square.png"><br>
            <img style="height: 50px" id="img3" src="269-2693391_mysql-mysql-logo-png-square.png"><br>
            <img style="height: 50px" id="img4" src="269-2693391_mysql-mysql-logo-png-square.png"><br>
            <img style="height: 50px" id="img5" src="269-2693391_mysql-mysql-logo-png-square.png"><br>
        </div>
```

<div>
    <script>
        $(function () {
            $("#id15").click(
                function (){
                    $("#img2").fadeToggle();
                    $("#img3").fadeIn("slow");
                    $("#img4").fadeOut(3000)
                    $("#img5").fadeTo("quick",0.5)
                }
            )
        })
    </script>
    <button id="id15">点击淡入</button><br>
    <img style="height: 50px ; display: none" id="img2" src="http://img.whaifree.top/image-resp/qrcode1641966581958.jpg"><br>
    <img style="height: 50px" id="img3" src="http://img.whaifree.top/image-resp/qrcode1641966581958.jpg"><br>
    <img style="height: 50px" id="img4" src="http://img.whaifree.top/image-resp/qrcode1641966581958.jpg"><br>
    <img style="height: 50px" id="img5" src="http://img.whaifree.top/image-resp/qrcode1641966581958.jpg"><br>
</div>

-----

- slideDown()

- slideUp()
- slideToggle()

```html
		<div>
            <script>
                $(function () {
                    $("#id16").click(
                        function () {
                            $("#id16").slideToggle();
                        }
                    )
                })
            </script>
            <div id="id16" style="height: 100px; width: 100px; background-color: #FF00FF; text-align: justify">点击方块</div>
        </div>
```

<div>
    <script>
        $(function () {
            $("#id16").click(
                function () {
                    $("#id16").slideToggle();
                }
            )
        })
    </script>
    <div id="id16" style="height: 100px; width: 100px; background-color: #FF00FF; text-align: justify">点击方块</div>
</div>

------

### animate动画

```html
<div>
            <script>
                $(function () {
                    $("#id18").click(
                        function () {
                            $("#id17").animate(
                                {
                                    left:'250px',   //移动方向与大小
                                    opacity:'0.8', //透明度
                                    height:'+=50px',
                                    width:'toggle'
                                })
                        }
                    )
                })
            </script>
            <div id="id17"
                 style="position: relative;height: 200px; width: 200px; background-color: #0000FF; text-align: center">
                animate动画 <br>
                默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
                如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
            </div>
            <br>
            <button id="id18">点击动画操作方块</button>
            <div id="id19"
                 style="position: relative;height: 200px; width: 200px; background-color: #0000FF; text-align: center">
                animate动画 <br>
            </div>
            
            <script>
                $(function () {
                    $("#id20").click(
                        function () {
                            var id19element = $("#id19");
                            id19element.animate({height:'300px',opacity:'0.4'},"slow");
                            id19element.animate({width:'300px',opacity:'0.8'},"slow");
                            id19element.animate({height:'100px',opacity:'0.4'},"slow");
                            id19element.animate({width:'100px',opacity:'0.8'},"slow");
                        }
                    )
                })
            </script>
            <br>
            <button id="id20">点击动画操作方块</button>
```
<div>
            <script>
                $(function () {
                    $("#id18").click(
                        function () {
                            $("#id17").animate(
                                {
                                    left:'250px',   //移动方向与大小
                                    opacity:'0.8', //透明度
                                    height:'+=50px',
                                    width:'toggle'
                                })
                        }
                    )
                })
            </script>
<div>
            <script>
                $(function () {
                    $("#id18").click(
                        function () {
                            $("#id17").animate(
                                {
                                    left:'250px',   //移动方向与大小
                                    opacity:'0.8', //透明度
                                    height:'+=50px',
                                    width:'toggle'
                                })
                        }
                    )
                })
            </script>
            <div id="id17"
                 style="position: relative;height: 200px; width: 200px; background-color: #0000FF; text-align: center">
                animate动画 <br>
                默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
                如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!
            </div>
            <br>
            <button id="id18">点击动画操作方块</button>
            <div id="id19"
                 style="position: relative;height: 200px; width: 200px; background-color: #0000FF; text-align: center">
                animate动画 <br>
            </div>
            
            <script>
                $(function () {
                    $("#id20").click(
                        function () {
                            var id19element = $("#id19");
                            id19element.animate({height:'300px',opacity:'0.4'},"slow");
                            id19element.animate({width:'300px',opacity:'0.8'},"slow");
                            id19element.animate({height:'100px',opacity:'0.4'},"slow");
                            id19element.animate({width:'100px',opacity:'0.8'},"slow");
                        }
                    )
                })
            </script>
            <br>
            <button id="id20">点击动画操作方块</button>

---

### 滑动停止

- slideDown
- stop

## JQuery+HTML

> 元素.html() 获取html文本
> 元素.text()获取text文本内容
> 元素.val() 获取值内容

```html
<script>
    $(function () {

$("#id25").click(
            function () {
                alert("$(\"#id25\").text()："+$("#id29").text())
            }
        )

$("#id26").click(
            function () {
                alert("$(\"#id26\").html()："+$("#id29").html())
            }
        )
        $("#id28").click(
            function () {
                alert("$(\"#id26\").val()："+$("#id27").val())
            }
        )
    })
</script>
<p id="id29">获取 <b>段落</b> 内容</p>
输入：<input id="id27" value="输入框内容"></input>
<br>
<button id="id25">id25获取text</button>
<br>
<button id="id26">id26获取html</button>
<br>
<button id="id28">id28获取input</button>
<br>
```

### html、text、val、attr回调函数

- `ele.html(function(@元素下标、@原始数据))`

```html

        <div>
            <script>
                $(function () {
                    $("#btn5").click(
                        function () {
                            $("#a1").attr("href", "http://www.whaifree.top");
                            $("#a1").attr("href", function (i,origVal) {
                                /*attr回调函数 回调函数两个参数可以自己定义名称*/
                                return origVal+ "/article/list"
                            })
                        }
                    )
                })
            </script>
            <br>
            <a id="a1" href="https://www.baidu.com">默认指向百度</a><br>
            <button id="btn5">点击修改a超链接指向链接的值</button>
            <br>
        </div>
```

<div>
            <script>
                $(function () {
                    $("#btn5").click(
                        function () {
                            $("#a1").attr("href", "http://www.whaifree.top");
                            $("#a1").attr("href", function (i,origVal) {
                                /*attr回调函数 回调函数两个参数可以自己定义名称*/
                                return origVal+ "/article/list"
                            })
                        }
                    )
                })
            </script>
            <br>
            <a id="a1" href="https://www.baidu.com">默认指向百度</a><br>
            <button id="btn5">点击修改a超链接指向链接的值</button>
            <br>
        </div>

-----

### 追加内容

- append 
- prepend
- before
- after

---

### 删除，置空内容

- empty()
- remove()

---

### 自定义class

```html
<div>
            <script>
                $(function () {
                    var f = false;
                    $("#id34").click(
                        function(){
                            if (f = !f){ //实现两次点击实现不一样的操作
                                $("#id34").addClass("blue_important");
                            }else {
                                $("#id34").removeClass("blue_important");
                            }
                        }
                    );
                    $("#id35").click(
                        function(){
                            $("#id35").toggleClass("blue_important anotherClass").css("background-color","red");
                            alert($("#id35").css("background-color"));
                        }
                    )
                })
            </script>
            
            <style type="text/css">
                .blue_important
                {
                    color:blue;
                    font-weight: bold;
                    font-size: xx-large;
                }
            </style>
            
            <p id="id34">id34 点击改变颜色</p>
            <p id="id35"> 使用toggleClass实现增加删除class操作</p>
        </div>
```

<div>
            <script>
                $(function () {
                    var f = false;
                    $("#id34").click(
                        function(){
                            if (f = !f){ //实现两次点击实现不一样的操作
                                $("#id34").addClass("blue_important");
                            }else {
                                $("#id34").removeClass("blue_important");
                            }
                        }
                    );
                    $("#id35").click(
                        function(){
                            $("#id35").toggleClass("blue_important anotherClass").css("background-color","red");
                            alert($("#id35").css("background-color"));
                        }
                    )
                })
            </script>
            
            <style type="text/css">
                .blue_important
                {
                    color:blue;
                    font-weight: bold;
                    font-size: xx-large;
                }
            </style>
            
            <p id="id34">id34 点击改变颜色</p>
            <p id="id35"> 使用toggleClass实现增加删除class操作</p>
        </div>

Holding your breath

JQuery入门

Post Comments 评论列表0

Comment 评论

Holding your breath

For whatever I'm gonna do