jQuery入门

jQuery

jQuery

对js进行封装

压缩版本与未压缩版本一个是上线使用，后一个是开发使用，代码量相同，压缩版本删除了无用的空格，注释，不利于观看。

引入jQuery

<script type="text/javascript" src="jQuery地址"></script>

使用jQuery

$(document)

$(document).ready(
            function () {
                alert("Hello jQuery!")
            }
        );
/**
	$(document)，$是jQuery中的函数名称，document是函数的参数，作用是document对象变成jQuery函数库可以使用的对象
	ready：是jQuery中的函数，是准备的意思，当页面的dom对象加载成功后汇之星ready函数的内容。ready相当于js中的onLoad事件
	function(){}:自定义的表示onLoad后要执行的功能。
**/

//上述内容的简写为
$(
	function(){}
)

DOM对象和jQuery对象

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

var obj = document.getElementById("text"); obj是dom对象，也叫作js对象。可以通过该对象使用其属性和方法。obj.value

jQuery对象，使用jQuery语法表示的对象叫做jQuery对象。注意：jQuery表示的对象都是数组。例如：var $obj = $("#text"); $obj就是使用jQuery语法表示的对象，也就是jQuery对象。它是一个数组。

dom对象和jQuery对象的相互转换

dom对象可以转为jQuery对象，语法为$(dom对象)

jQuery对象也可以转换为dom对象，语法为：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get(0)

对象的转换主要是为了使用对象的方法和属性，如果想要使用jQuery提供的函数，那么必须要是jQuery对象才可以。

选择器(重要)

是一个字符串，用来定位dom对象，定位了dom对象，就可以通过jQuery的函数操作dom。

常用的选择器：

id选择器 语法：$("#dom对象的id值")

通过dom对象的id来定位dom对象的。通过id找对象，id在当前页面中是唯一值。

class选择器 语法：$(".class 样式名")

class表示css中的样式，使用样式的名称定位dom对象。

标签选择器 语法：$("标签名称")

使用标签名称定位dom对象

组合选择器 语法：将上面三者可以进行结合，用逗号分割。

表单选择器 是为了定位不同type的input标签 $(":type属性值")表示找到所有type属性值的input标签。

过滤器

对于已经定位到的jQuery对象，通过过滤器过滤掉一些数组中的对象。过滤器需要和选择器一起使用。

基本过滤器

选择第一个first，保留数组中第一个dom对象

$("选择器:first")

选择最后一个last，保留数组中最后dom对象

$("选择器:last")

选择数组中的指定索引处的对象

$("选择器:eq(数组索引)")

选择数组中小于指定索引的所有dom对象

$("选择器:lt(数组索引)")

选择数组中大于指定索引的所有dom对象

$("选择器:gt(数组索引)")

表单属性过滤器

根据表单中dom对象的状态情况，定位dom对象。

状态：enabled，disabled，checked

选择可用的文本框 $(":text:enabled")

选择不可用的文本框 $(":text:disabled")

复选框选中的元素 $(":checkbox:checked")

选择指定下拉列表的被选中的元素 $("选择器>option:selected")
父>子

绑定事件方式

$("选择器").事件名称(function(){})
$("选择器"):定位dom对象，都没对象可以有多个，这些dom对象都会绑定事件
事件名称:就是js中的事件去掉on的部分，例如js中的单击事件onclick()，jQuery中的事件名称就是click(),都是小写
事件处理函数:就是一个function(){}，当事件发生时，执行这个函数的内容。

on()绑定事件
on()方法在被选元素上添加时间处理程序。该方法给API带来很多遍历，推荐使用该方法
$("xzq").on("event",function(){})
## event: 事件一个或者多个，多个之间空格隔开。事件名称，就是js中的事件去掉on的部分
## function: 可选。规定当时间发生时运行的函数。

函数

第一组

val
操作数组中dom对象的value属性
$("选择器").val():无参数的调用形式，读取数组中第一个dom对象的value属性值
$("选择器").val(值):有参形式调用；对数组中所有dom对象的value属性值进行统一赋值

text
操作数组中所有dom对象的文字显示内容属性
$("选择器").text():无参数调用，读取数组中所有dom对象的文字显示内容，将得到内容拼接为一个字符串返回
$("选择器").text(值):有参数方式，对数组中所有dom对象的文字显示内容进行统一赋值

attr
对val，text之外的其他属性操作
$("选择器").attr("属性名")：获取dom数组第一个对象的属性值
$("选择器").attr("属性名","值")：对数组中所有dom对象的属性设为新值

第二组

remove
$("xzq").remove():将数组中所有dom对象及其子对象一并删除

empty
$("xzq").empty():将数组中所有的dom对象的子对象删除

append
$("xzq").append("xxx"):维数组中所有dom对象添加子对象

html
设置或返回被选元素的内容(innerHTML)
$("xzq").html():无参数调用方法，获取dom数组第一个元素的内容。
$("xzq").html():有参数调用，用于设置dom数组中所有元素的内容。

each
each是对数组，json、dom数组等的遍历，对每个元素调用一次函数
语法一：$.each(要遍历的对象,function(index,element){})
语法二：jQuery对象.each(function(index,element){})
## index: 数组的下标
## element: 数组的对象

Ajax

jQuery简化了ajax的请求处理，使用下面三个函数中的一个便可以实现ajax请求的处理

$.ajax() : jQuery实现ajax的核心函数

$.post() : 使用post方式发送ajax请求

$.get() : 使用get方式发送ajax请求

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

$.ajax()参数是一个json的结构

async: 是一个boolean类型的值，默认是true，表示异步请求。可以不写async这个配置项

contentType:一个字符串，表示从浏览器发送到服务器的参数的类型。默认为application/x-www-form-urlencoded。如果想发送json格式的字符串，可以写为application/json;

data: 可以是字符串、数组、json，表示请求的参数和参数值。常用的是json格式的数据。

dataType:预期服务器返回的数据类型。如果不指定，jQuery将自动根据Http包MIME信息来只能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个js对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值：

xml: 返回xml文档，可用jQuery处理

html: 返回纯文本html信息，包含script标签会在插入dom时执行

script: 返回纯文本ja代码。不会缓存结果。除非设置类cache参数。注意，在远程请求(不再同一个域下)，所有的post请求都将转换为get请求

json: 返回json数据

jsonp:

text: 返回纯文本字符串

error: 一个function，表示请求发生错误时，执行的函数
error:function(){}

success: 一个function，表示请求成功了，从服务器端反悔了数据，汇之星success指定函数。
seccess:function(data,textStatus,jqXHR){}; data:由服务器返回的数据

url: 请求的地址

type: 请求的方式get/post，不区分大小写，默认为get

$.ajax({
    async:true,
    url:"xxx",
    data:{
        "key1":"value1",
        "key2":"value2"
    },
    dataType:"json",
    type:"get",
    success:function(response) {
        alert(response);
    },
    error:function(){
        alert("ajax请求出现错误")
    }
})

posted @ 2022-03-11 11:41 吃心王阅读(55) 评论(0) 收藏举报

刷新页面返回顶部

吃心王

jQuery入门

jQuery

引入jQuery

使用jQuery

$(document)

DOM对象和jQuery对象

dom对象和jQuery对象的相互转换

选择器(重要)

过滤器

基本过滤器

表单属性过滤器

绑定事件方式

函数

Ajax

公告