jQuery库精要-优快云博客

本文链接：https://blog.youkuaiyun.com/Answer0902/article/details/94452072

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

语法：

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

事件：

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

jQuery 是为事件处理特别设计的。

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

常用的 jQuery 事件方法：

$(document).ready()：允许我们在文档完全加载完后执行函数。
click():当按钮点击事件被触发时会调用一个函数。
bind():为当前jQuery对象包含的所有DOM元素的type事件绑定事件处理函数

jQuery - 获取内容和属性：

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>

<head>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>名称: <input type="text" id="test" value="W3Cschool教程"></p>
<button>显示值</button>
</body>

jQuery - AJAX:

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

serialize（）：将该jQuery对象包含的表单或表单控件转换成查询字符串；
serializeArray（）：将该jQuery对象包含的表单或表单控件转换成一个数组，其都是{name:filedname,value:filedname}格式；

AJAX方法：

<script>
        $(function(){

            $.ajax({
               type:"post",
               dataType:"text json",
               url:"/user",
               data:"action=show",
               statusCode:{
                   200:function(data){
                     //  var tr=$("#msg>tbody>tr:last");

                       var id=0;
                       var str="";
                       $(data).each(function(i,value){

                            str+="<tr><td>"+(++id)+"</td>"+
                                    "<td>"+value.username+"</td>"+
                                "<td>"+value.password+"</td>"+
                                "<td>"+
                                   "<input type='button' class='btn btn-success custom-width' onclick='edit("+value.id+")' value='编辑'/>"+
                                   "<input type='button' class='btn btn-danger custom-width' onclick='del("+value.id+")' value='删除'/>"+
                               "</td></tr>";

                       });
                       $("#msg").append(str);

                   }
               }

            });

        });

    </script>