jQuery入门

jQuery入门

1、基础语法

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

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

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

实例:

• $(this).hide() - 隐藏当前元素
• $("p").hide() - 隐藏所有 <p> 元素
• $("p.test").hide() - 隐藏所有 class="test" 的

  元素

• $("#test").hide() - 隐藏 id="test" 的元素

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合，因此选择页面中元素时使用css选择器选择

2、文档就绪事件

类似于原生JS中的window.onload，作用是当文档完全加载完毕后再运行jQuery代码

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
 
// 简写
 
$(function() {
    
})

jQuery 入口函数与 JavaScript 入口函数window.onload的区别：

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行，可以执行多次
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行，只能执行一次，如果执行多次，会覆盖前面前面执行

3、jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

详细内容

4、jQuery事件

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

$("#mybutton").click(function(){
    // 动作触发后执行的代码!!
});
 
// 注意：绑定事件不是等号赋值，而是以参数形式传入

5、jQuery捕获

jQuery 拥有可操作 HTML 元素和属性的强大方法。

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

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

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

用户名<input type="text" id="user"><br>
密码<input type="password" id="pass">
<script>
    $(function() {
        $("#user").blur(function() {
            console.log($("#user").attr("type")) // text
            console.log($("#user").val()) // xxx
        })
    })
</script>

设置css样式

$("button").click(function(){
    $("p").css("color","red");
});

6、添加元素

向HTML中添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

append

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

After

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

7、删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p>元素：

$("p").remove(".italic")

8、Ajax

8.1、背景

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

• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

• Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

• 实例：当您在搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

• 传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。

• 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

• 使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

8.2、利用Ajax可以做什么？

• 注册时，输入用户名自动检测用户是否已经存在。
• 登陆时，提示用户名密码错误
• 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
• 等等……

8.3、发送异步请求

• Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
• jQuery 提供多个与 AJAX 有关的方法。
• 通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
• jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

jQuery.ajax(...) // 通用请求
jQuery.get(...) // get请求
jQuery.post(...) // post请求
       部分参数：
              url：请求地址
             type：请求方式，GET、POST（1.9.0之后用method）
          headers：请求头
             data：要发送的数据
      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
            async：是否异步
          timeout：设置请求超时时间（毫秒）
       beforeSend：发送请求前执行的函数(全局)
         complete：完成之后执行的回调函数(全局)
          success：成功之后执行的回调函数(全局)
            error：失败之后执行的回调函数(全局)
          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
         dataType：将服务器端返回的数据转换成指定类型
            "xml": 将服务器端返回的内容转换成xml格式
           "text": 将服务器端返回的内容转换成普通文本格式
           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
           "json": 将服务器端返回的内容转换成相应的JavaScript对象
          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

一般只用给两个参数：url和success，参数有两种传入方式，一种是JSON格式，一种是普通参数

$.post({
    url:"",
    success:function(data) {
        
    }
}) {}
 
$.post("[[@{/list}]]",function (data) {}

4、Demo01请求后端数据

1、编写控制器方法

@Controller
public class AjaxController {
    @RequestMapping("/a1")
    public void ajax1(String name , HttpServletResponse response) throws IOException {
        if ("admin".equals(name)){
            response.getWriter().print("true");
        }else{
            response.getWriter().print("false");
        }
    }
}

2、导入jQuery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

3、编写前端代码

<input type="button" id="show" value="显示所有书籍">
<table>
    <tr>
        <th>id</th>
        <th>书名</th>
        <th>价格</th>
        <th>数量</th>
        <th>类型</th>
    </tr>
    <tbody id="tbodyid">
    </tbody>
</table>
<script>
    $(function () {
        $("#show").click(function () {
            $.post("[[@{/list}]]",function (resp) {
                console.log(resp)
                var html="";
                for (var i = 0; i <resp.length ; i++) {
                    html += "<tr>";
                    html += "<td>" + resp[i].bookId + "</td>"
                    html += "<td>" + resp[i].bookName + "</td>"
                    html += "<td>" + resp[i].bookPrice + "</td>"
                    html += "<td>" + resp[i].bookCount + "</td>"
                    html += "<td>" + resp[i].bookType + "</td>"
                    html += "</tr>"
                }
                console.log(html)
                $("#tbodyid").html(html)
            });
        })
    })
</script>

5、Demo02注册验证用户名

用户名<input type="text" id="user"><span></span><br>
<input type="button" id="mb" value="提交">
<script>
    $(function () {
        $("#mb").click(function () {
            $.post("[[@{/register}]]", {"name": $("#user").val()}, function (data) {
                var sp = $("span")
                if("ok" == data) {
                    sp.html(data)
                    sp.attr("style","color:green")
                } else {
                    sp.html(data)
                    sp.attr("style","color:red")
                }
            })
        })
    })
</script>