【前端】jQuery

jQuery 是 JavaScript 的一个库，可以简化 JavaScript 编程

点击下载 jQuery

语法

$(selector).action()

jquery(selector).action()

selector 为选择器，使用选择器选择 HTML 元素

action() 为操作，对选中的元素进行操作

选择器

CSS 选择器

// 选取所有 id="id" 的元素
$("#id") 

// 选取所有 class="class" 的元素
$(".class") 

// 选取 <p> 元素
$("p") 

// 选取所有 id="id" 的 <p> 元素
$("p#id") 

// 选取所有 class="class" 的 <p> 元素
$("p.class") 

属性选择器

// 选取所有带有 href 属性的元素
$("[href]") 

// 选取所有带有 href 值等于 "#" 的元素
$("[href='#']") 

// 选取所有带有 href 值不等于 "#" 的元素
$("[href!='#']") 

其他选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

练习

$(this).hide()

<button></button>

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

<script>
    $(document).ready(
        $("button").click(
            $(this).hide();
        );
    );
</script>

获取数据

获取属性

// 用于获取属性值
attr() 

<a href="www.baidu.com" id="baidu">www.baidu.com</a>

<button>显示 href 值</button>

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

<script>
    $(document).ready(
        function () {
            $("button").click(
                function () {
                    alert($("#baidu").attr("href"));
                }
            );
        }
    );
</script>

获取 input 标签的 value 值

// 用于获得输入字段的值
val()

<input type="text" id="text">

<button>显示输入信息</button>

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

<script>
    $(document).ready(
        function () {
            $("button").click(
                function () {
                    alert($("#text").val());
                }
            )
        }
    );
</script>

遍历函数

// 对 jQuery 对象进行迭代
// 为每个匹配元素执行函数
each()

<ul>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Coke</li>
</ul>

<button>输出每个列表项的值</button>

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

<script>
    $(document).ready(
        function () {
            $("button").click(
                function () {
                    //遍历每个li标签，每个匹配的li标签，输出他的内容
                    $("li").each(
                        function () {
                            alert($(this).text())
                        }
                    );
                }
            );
        }
    );
</script>

<input id="1" type="checkbox"> one <br>
<input id="2" type="checkbox"> two <br>
<input id="3" type="checkbox"> three <br>
<input id="submitcheckbox" type="button" value="显示选择结果">

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

<script>
    $(document).ready(
        function () {
            $("#submitcheckbox").click(
                function () {
                    var i = 0;
                    var id = new Array();
                    //代表选取input标签， type="checkbox" 的元素
                    $("input:checkbox").each(
                        function () {
                            //如果被选中,this代表发生事件的dom元素，<input>
                            if ($(this).is(':checked')) {
                                //获取id的值，存储到id数组当中
                                id[i] = $(this).attr("id");
                                i++;
                            }
                        }
                    );
                    alert(id);
                }
            );
        }
    );
</script>

AJAX

Ajax 简介
jQuery 中 Ajax 操作函数简介
jQuery Ajax 的 ajax() 方法简介

ajax()

定义

ajax() 方法通过 HTTP 请求加载远程数据

语法

$.ajax(设置)
jQuery.ajax(设置)

重要参数

• url：请求地址，String 类型，默认为当前页面地址
• data：发送到服务器的数据，会自动转化为请求字符串格式
• type：HTTP 请求方法，默认为 GET，可以改为 POST
• dataType：预期服务器返回的数据类型
• success：请求成功后的操作
• error：请求失败后的操作