jQuery总结

最新推荐文章于 2024-05-23 18:11:35 发布

梦因you而美

最新推荐文章于 2024-05-23 18:11:35 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML前端文章标签： jQuery $的用途 click与focus JSON ajax

本文链接：https://blog.youkuaiyun.com/apollo_miracle/article/details/82352525

HTML前端专栏收录该内容

18 篇文章

订阅专栏

本文介绍了jQuery的基础使用方法，包括页面加载完成时执行代码的方法、元素对象的选择与操作技巧、事件处理等内容，并简要概述了AJAX的基本用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery需要重点关注的几个点：

 1、如何在页面加载完成时执行代码。

$(function(){})

$(document).ready(function(){})

 2、如何选择元素对象

1、使用选择器选择

2、使用过滤器对之前的选择的元素进行过滤

3、对选择的元素进行转移（族谱上进行转移）

 3、操作元素对象：

1、操作对象的样式 css({样式1: 值1, 样式2: 值2})

2、操作对象中的html。 html() 等同于 innerHTML

3、操作对象中的属性。prop()

4、操作对象的事件。

js代码编写：

1、获取元素对象

2、设置或获取属性的值，或调用方法。

jQuery代码核心在：

1、使用css的选择器获取元素对象（jQuery封装过的对象）

2、调用方法对对象进行操作。

$的用途：

 1、在页面加载完成时执行代码

$(function(){

    // 页面完成后执行的代码

})

 2、接收一个选择器的字符串，用于选择页面中的相应的元素jQuery对象

$("选择器")

3、接收一个原生的js对象，并转换成jQuery对象

 $(this)

 var arr = [1,2,3,4,5];

 $(arr).each(function(i, n){

     alert(n)

 })

return的功能：

1、返回一个值

2、结束程序运行，不继续执行

js老版本与ES6中变量声明的区别

 js老版本：（使用var关键字声明变量）

1、函数内部变量

2、全局变量

 ES6中：（使用let关键字声明变量）

1、函数内部变量

2、块级变量（{}包裹的代码）

3、全局变量

click与focus的区别：

 click，元素被点击。（鼠标操作）

 focus，元素获得焦点。

 focus() ，给标签添加焦点

focus(function(){ }) 设置当元素对象获得焦点时事件处理程序（点击元素、使用tab键选中元素都会触发）

js的对象：更像是python中字典和对象的结合。定义像字典，使用像对象。

 如何创建js对象：

1、使用new创建 var obj = new Object();

2、使用直接量 var obj = {} （方法简单）

 对象可以有属性，和方法

var obj = {name: "zhangsan", age: 18, sayHello: function(){alert("Hello") }}

 对象的属性和方法可以动态添加

obj.gender = "male"

JSON：就是js中对象和数组的任意的排列组合。

用途：用来传递数据，而不是处理数据（不需要有方法）。

要求：对象的属性（键）使用""包裹。

对象没有方法。

如：{"省会": "郑州"， "城市": [{"城市": "安阳", "县区":["林州", "anyangxian"]}, "zhengzhou", "luoyang"]}

还差 ajax 知识点

AJAX:

异步的javascript 和xml （ Asynchronous Javascript And XML）就是javascript进行异步通信的一些对象，数据的传递使用xml。现在数据传递都不在使用xml而是用json。

使用HTTP协议发送一次异步的请求，获取响应中的数据，并进行展示。

$.ajax({
    url: '/change_data',  // url路径
    type: 'GET',  // 请求方式get（还有post请求方式）
    dataType: 'json',  // "响应数据的文件格式", json 表名返回数据时json
    data:{'code':300268}  // 需要携带的数据
})
.done(function(dat) {  // 响应成功时执行的函数
    alert(dat.name);
})
.fail(function() {  // 响应失败时执行的函数
    alert('服务器超时，请重试！');
});

$.ajax按照请求方式可以简写成$.get或者$.post方式

$.get("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});

$.post("/change_data", {'code':300268},
  function(dat){
    alert(dat.name);
});