JQuery学习笔记

Posted 2021-10-17 AMHAO

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery学习笔记相关的知识，希望对你有一定的参考价值。

JQuery

1.JQuery是js库

库：相当于java的工具类，库是存放东西的，JQuery是存放js代码的地方，放的用js代码写的function

JQuery是一款主流浏览器的javascript库，封装了JavaScript相关方法调用，简化JavaScript对html DOM操作。

JQuery作用：可以操作dom对象，时间处理，动画，ajax。

JQuery优点：

1.写少代码，做多事情

2.免费，开源并且轻量级的js库，容量很小

3.兼容市面上主流浏览器

4.能处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能

5.文档手册很全，很详细

6.成熟的插件可供选择，多种js组件

7.出错的话有一定的提示信息

8.不用再在html里面通过<script>标签插入一大堆js来调用命令了。

第一个JQuery例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JQuery</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js">
    //src代表的是JQuery函数库所存放的相对路径
    </script>
    <script type="text/javascript">
        /*
            1.$(document)中，$是JQuery中的函数名称，document是函数的参数，作用是document对象变成JQuery函数库可以使用的对象
            2.ready是JQuery中的函数，是准备的意思，当页面的dom对象加载成功后，会执行ready函数的内容，ready相当于js中的onLoad事件。
            3，function（），为自定义的函数，表示onLoad后要执行的功能。
        */
        $(document).ready(function(){
            alert("hello JQuery 标准模式");
        })
        //1
        $(function(){
            alert("hello JQuery 快捷模式")
        })
        //2
        //1和2等价
    </script>
</head>

<body>

</body>
</html>

$(document).ready()与$()、JQuery()、windo.JQuery()是等价的。

2.dom对象和JQuery对象

dom对象：使用JavaScript的语法创建的对象叫做dom对象，也就是js对象

var obj=document.getElementById("txt1"); //其中obj就是dom对象，也叫作js对象

JQuery对象：使用JQuery语法表示对象叫做JQuery对象，JQuery表示的对象都是数组

var obj=$("#txt1"); //obj就是使用JQuery语法表示的对象，也就是JQuery。他是一个数组，只是当前数组中只有一个值。

dom对象和JQuery对象相互转换：

dom对象可以转换为JQuery，语法格式为: ${dom对象}

JQuery对象转换为dom对象的语法格式：从数组中获取第一个对象，第一个对象就是dom对象，是用[0]或者get[0]

选择器

选择器：是一个字符串，用来定位dom对象，定位了dom对象，就可以通过JQuery函数操作dom

基本选择器

根据 ID，class 属性，标签类型名定位 HTML 元素，转为 jQuery 对象.

1.id 选择器：$("#dom对象的id值")

语法：$(“#id”)

2.class 选择器

语法：$(“.class 名称”)

3.标签选择器

语法：$(“标签名”)

表单选择器

表单选择器：使用<input>便签的type属性值，定位dom对象的方式。该方法无论是否存在表单<form>，均可以用。与是否存在form无关。并且${":tr"}不可以用，因为tr不是input标签。

语法：${":type属性值"}

例如：${":text"},选择的是所有的单行文本框

${":button"}，选择的是所有的按钮

过滤器

基本过滤器

在定位了dom对象后，根据一些条件筛选dom对象，过滤器又是一个字符串，用来筛选dom对象的，并且过滤器不能单独使用，必须和选择器一块使用。

    jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系
    <div>1</div> dom1
    <div>2</div> dom2
    <div>3</div> dom3
    $("div") == [dom1,dom2,dom3]
    过滤器就是过滤条件，对已经定位到数组中 DOM 对象进行过滤筛选，过滤条件不能独立
    出现在 jquery 函数，如果使用只能出现在选择器后方。
2.3.1 基本过滤器
    1.选择第一个 first, 保留数组中第一个 DOM 对象
    语法：$(“选择器:first”)
    2.选择最后个 last, 保留数组中最后 DOM 对象
    语法：$("选择器:last")
    3.选择数组中指定对象
    语法：$(“选择器:eq(数组索引)”)
    4.选择数组中小于指定索引的所有 DOM 对象
    语法：$(“选择器:lt(数组索引)”)
    5.选择数组中大于指定索引的所有 DOM 对象
    语法：$(“选择器:gt(数组索引)”)

表单过滤器

表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象。

1.选择可用的文本框

启用状态：enabled

语法格式：$(":text:enabled")

2.选择不可用的文本框

不可用状态：disabled

语法格式：$(":text:disabled")

3.复选框选中的元素

选择状态：checked，例如radio，checkbox

语法格式：$(":checkbox:checked")

4.获取指定下拉列表的被选中元素

语法规则：$("选择器>option:selected")

事件

JQuery中给dom对象绑定事件

1）$(选择器).事件名称(事件的处理函数)

$(选择器)：定位dom对象，dom对象可以有多个，这些dom对象都绑定事件了。

事件名称：就是js中的事件去掉on部分，

例如：js中的单击事件onclick（），在JQuery中的事件名称就是click。

事件处理函数：就是一个function，当事件发生时，执行这个函数的内容。

例如：

//给id是btn的按钮绑定单击事件
$("btn").click(function(){
        alert("btn按钮单击了")
})

函数

第一组

1.val

操作数组中DOM对象的value属性

${选择器}.val():无参数调用形式，读取数组中第一个DOM对象的value属性值

${选择器}.val(值):有参形式调用；对数组中所有DOM对象的value属性值进行统一赋值。

2.text

操作数组中所有 DOM 对象的【文字显示内容属性】

$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回

$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

3.attr

对 val, text 之外的其他属性操作

$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值

$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

第二组

1.hide

$(选择器).hide():将数组中所有DOM对象隐藏起来

2.show

$(选择器).show():将数组中所有DOM对象在浏览器中显示起来

3.remove

$(选择器).remove():将数组中所欲的DOM对象以及其子对象一并删除

4.empty

$(选择器).empty():将数组中所有DOM对象的子对象删除

5.append

为数组中所有DOM对象添加子对象

语法格式：$(选择器).append("<div>我动态添加的div</div>")

6.html

设置或返回被选元素的内容（innerHTML).

$(选择器).html():无参数调用方法，获取DOM数组第一个元素的内容

$(选择器).html(值):有参数调用，用于设置DOM数组中所有元素的内容

7.each

each是对数组，json和dom数组等的遍历，对每个元素调用一次函数

语法1：$.each(要遍历的对象,function(index,element){处理程序})

$:相当于是java的一个类名

each：就是类中的静态方法

处理函数：function(index,element):

index,element都是自定义的形参，名称自定义

index：循环的索引

element：数组中的成员。

语法2：JQuery对象.each(function(index,element){处理程序})

index:数组的下标

element:数组的对象

事件

on()绑定事件

on()方法在被选元素上添加事件处理程序，该方法给API带来很多遍历。

语法格式：$(选择器).on(event,function)

event:事件一个或者多个，多个之间空格分开

function：可选，规定当事件发生时运行的函数。

使用JQuery的函数，实现ajax请求的处理

没有JQuery之前，使用XMLHttpRequest做ajax，需要四个步骤，JQuery的出现，简化了ajax请求的处理，使用三个函数可以实现ajax请求的处理。

1）$.ajax() ：JQuery中实现ajax的核心函数。

2）$.post() ：使用post方式做ajax请求

3）$.get() ：使用get方式发送ajax请求

$.post()和$.get() 他们在内部都是调用的$.ajax()

$.ajax函数的使用，函数的参数表示请求的url，请求的方式，参数值等信息。

json结构的参数说明

$.ajax( { name:value, name:value, ... } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
    async ： 布尔值，表示请求是否异步处理。默认是 true
    contentType ：发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
    data：规定要发送到服务器的数据，表示请求的参数或者参数值，可以是：string， 数组，多数是 json
    dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
    error(xhr,status,error)：一个function，如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
    success(result,status,xhr)：一个function，当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参名
    type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。
error() , success()中的 xhr 是 XMLHttpRequest 对象。

jQuery学习笔记

jQuery 是一个 JavaScript 库； jQuery 极大地简化了 JavaScript 编程； jQuery 很容易学习；

一. 什么 jQuery？

jQuery 是 JavaScript 的一个框架，是对 JS 的一种封装，使得 JS 使用方便，简单易学

优点

不用考虑兼容性问题
jQuery 拥有强大的选择器，简化了 JS 代码
jQuery 封装了很多系统函数，直接调用，非常方便
完善的异常处理机制
出色的浏览器兼容性
提高开发效率

二. 怎么使用 jQuery？

下载 jQuery 的核心 JS 放入项目中 jquery-1.xx.xx.js
在页面上使用 <script src="js/jquery-1.xx.xx.js"></script>

三. 初始化函数

JS 初始化函数 window.onload = function()
jQuery 初始化函数
1. jQuery(function() );
2. $(function() );
3. jQuery().ready(function());
4. $().ready(function());