JQuery框架总结

一、JQuery对象的引用
1.jq的下载地址：https://jquery.com/download/
点击Download the uncompressed, development jQuery 版本号
进入js文件后，按ctrl+s保存到电脑中

2.DOM(Document Object Model)，即文档对象模型;
DOM最顶层是Window对象，Window对象下面是Document（文档对象）、Navigator(浏览器对象)、Screen（屏幕对象）、History（浏览历史对象）、Location（URL对象）。

3.$ 符号在JQuery中代表对JQuery对象的引用，JQuery是核心对象；JQuery是对js的封装。

4.通过Html的script标签的形式引入JQuery的js文件

<script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8">

二、DOM对象和JQuery对象
1.DOM对象
通过js的方式获取元素对象,js包含了DOM对象，DOM包含了windows对象，windows又包含了document对象；
即document是js中的一个对象，用document来获取元素对象，返回的是DOM对象；

<script type="text/javascript">var dom = document.getElementById("mydiv");console.log(dom);var divCollection = document.getElementsByTagName("div");console.log(divCollection);
</script>

document.getElementById(“mydiv”)；
该方法获取一个id="mydiv"的元素对象；
获取的元素对象为：

mydiv

当id="mydiv"不存在时，该元素对象为null

document.getElementsByTagName(“div”);
该方法是获取标签名为div的所有元素对象；返回的是一个结果集
如果没有标签名为div的元素对象，则返回一个HTMLCollection[]

document.getElementByClassName(“myclass”);
获取所有class=“myclass”的元素对象；
即通过class选择器获取所有的class='myclass’的元素对象。
如果没有，则返回一个HTMLCollection[]
document对象还有各种方法来获取元素对象。

2.JQuery对象
通过JQuery的方法获取元素对象，返回JQuery包装集；
$(“#mydiv”)
“#属性值"的格式是id选择器的语法
$(”.mydiv")
“.属性值"的格式是class选择器的语法
$(”#mydiv")，当id="mydiv"的属性值不存在时，返回一个jQuery.fn.init {}，而不是null；

var divDOM = document.getElementById("mydiv");
//DOM对象转JQuery对象，只需要$()方法对DOM对象进行包装即可
var divDOMToJQuery = $(divDOM);

var divJQuery = $("#mydiv");
//JQuery对象转DOM对象，只需要取数组中的元素即可
var divDOM = divJQuery[0];

//遍历JQuery对象数组得到的对象是DOM对象，可以通过$()转化为JQuery对象
$("#mydiv").each(function(){var jquery = $(this);
});

三.JQuery选择器
1.基础选择器
id选择器，#id属性值，$ (“#id属性值”);
即选择一个id的值为指定值的元素对象；若存在多个同名id，则取第一个。

元素名称选择器，标签名/元素名，$ (“标签名/元素名”);
即选择所有指定标签的元素对象。

class选择器，.class属性值，$(“.class属性值”);
即选择一个class的值为指定值的元素对象。

通用选择器，*，$(" * ") ；
即选择页面中的所有元素对象。

组合选择器，选择器1、选择器2、…，$(“选择器1、选择器2、…”);
即选择指定选择器选中的元素对象。

id选择器，元素名称选择器，class选择器这三个是常用的选择器。

2.层次选择器
后代选择器，ancestor descendant, $ (“#parent div”)；
即选择id为parent元素的所有div元素。

子代选择器，parent>child, $ (“#parent>div”);
即选择id为parent元素的所有直接div子元素。

相邻选择器，prev+next, $ (“.blue+img”);
即选择css的类为blue的下一个同级img元素（必须挨着的指定元素）。

同辈选择器，prev~ sibling, $ (“.blue~img”);
sibling(兄弟姐妹)，顾名思义，即选择css的类为blue之后的所有同级的img元素。

后代和子代是非同级的，而相邻和同辈是同级的；且非同级的后代和子代选择器更常用。

3.表单选择器
$ (“:input”);
会查找所有的input元素，包含了input、select、textarea、button。
即选择所有的input、select、textarea、button元素；

$ (“input”);这是属于元素名称选择器；
即选择所有标签名为input的元素；

以下为input标签下具体的type属性的选择器

文本框选择器，$ (“:text”);
密码框选择器，$ (" :password");
单选按钮选择器，$ (“:radio”);
多选按钮选择器，$ (“:checkbox”);
提交按钮选择器，$ (“:submit”);
图像按钮选择器，$ (“:image”);
重置按钮选择器，$ (“:reset”);
文件域选择器，$ (“:file”);
按钮选择器，$ (“:button”);

例如：

<input type="submit" value="111" />

$ (“:submit”)；即选择提交按钮选择器；

四.JQuery的DOM操作
属性的分类：
固有属性：元素本身就有的属性（例如name,id,class等）；
返回值是boolean的属性：selected,checked,disabled
自定义属性：用户自己定义的属性

1.操作元素的属性
a.获取属性
attr(“属性名”);prop(“属性名”)；

<html><head><meta charset="utf-8"><title>操作元素的属性</title></head><body><input type="checkbox" name="ch" checked="checked" id="aa" value="aa" abc="aabbcc"/>aa<input type="checkbox" name="ch" id="bb" value="bb" />bb</body><!-- 在需要使用jquery的页面引入jquery的核心js文件 --><script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script><script type="text/javascript">/*获取属性*///固有属性 （值相同）var name = $("#aa").attr("name");console.log(name);var name2 = $("#aa").prop("name");console.log(name2);//返回的值是boolean的属性（元素设置了属性）var ch1 = $("#aa").attr("checked");//checkedvar ch2 = $("#aa").prop("checked");//trueconsole.log(ch1);console.log(ch2);//返回的值是boolean的属性（元素未设置属性）var ch3 = $("#bb").attr("checked");//undefinedvar ch4 = $("#bb").prop("checked");//falseconsole.log(ch3);console.log(ch4);//用户自己定义的属性var abc1 = $("#aa").attr("abc");//aabbccvar abc2 = $("#aa").prop("abc");//undefinedconsole.log(abc1);console.log(abc2);</script>
</html>

attr()和prop()的区别：

如果是固有属性：attr()和prop()均可获取；
如果是用户自定义的属性：attr()可获取；prop()不可获取，显示undefined;
如果是返回值是boolean类型的属性：若设置了属性：attr()返回一个具体的值，prop()返回true；若未设置属性：attr()返回undefined，prop()返回false；

b.设置属性
attr(“属性名”,“属性值”);
prop(“属性名”,"属性值)；
对于固有属性：prop()和attr()都能设置。

对于返回值是boolean类型的属性：attr()的属性值是具体的值，而prop()的属性值是true或false；prop()设置属性更方便。

对于用户自己定义的属性：attr()能设置，而prop()不能设置

c.移除属性
removeAttr(“属性名”)；移除指定属性名的属性

也就是说属性的类型有三种：
固有属性；返回值为Boolean类型的属性；用户自己定义的属性。
如果是返回值为Boolean类型的属性（常用的三种selected,checked,disabled）用prop(),prop(“属性名”,true/false);否则用attr()

2.操作元素的样式

1）attr("class");获取元素的样式名。
2）attr("class","样式名")；设置元素的样式。
即重置样式后再添加样式。
3）addClass("样式名")；添加样式。
即在保留原来的样式的基础上再添加样式；如果出现相同类型的样式，以最后的为准。
4）css()；添加具体的样式（添加行内样式）。
例如：添加单个行内样式，css("font-size","40px");
添加多个行内样式，css({"font-family":"楷体","color":"blue"});使用json格式
即
5）removeClass("样式名")；移除样式。

行内样式的好处：是能直接改，优先级也是最高，对于单个不重复页面处理容易，易于理解。

行内样式的缺点：当页面重复使用一种类型的style时，容易造成冗余，后期代码量大，不易于维护。

内部样式：可以实现内容与样式分离。
好处：实现了内容与表现相分离，解决了内部样式出现的冗余的问题

缺点：当页面较多，且用到同一种样式的时候，会造成冗余
外部样式：用单独的css文件表示，然后再在内部引用，即首先在css文件下新建一个css文件，用来放样式，然后在html或者是要展示的文件下引用样式：

好处：实现单个css，解决内部样式冗余，方便维护

缺点：几乎没有，除了引用复杂，每一种类型的样式都有他们独特的好处

如果都作用在同一个样式下的三种样式，css的优先级为：行内样式>内部样式>外部样式；
即使用的样式为优先级最大的css。

3.操作元素的内容

1）html();获取元素的内容，包含html标签（非表单元素）
即获取的内容可以包含html标签的形式
2）html("内容");设置元素的内容，包含html标签（非表单元素）
即通过html("内容")的方式添加元素，内容可以使用html标签的形式。
3）text();获取元素的纯文本内容，不识别html标签(非表单元素)
即通过text()方式获取的文本，拿不到html标签，只能拿到文本信息。
4）text("内容");设置元素的纯文本内容，不识别html标签(非表单元素)
即通过text("内容")的方式，html标签不会被识别，html标签只是按照文本的形式显示。
5）val();获取元素的值（表单元素）
即获取用户在表单元素操作的值
6）val("值");设置元素的值（表单元素）
即设置表单元素的值

总而言之，有html标签的用html()的方式；没有得话，可以用html()，也可以用text()的方式；可以全部直接使用html()的方式。

表单元素：
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉选框select
即用户页面上可以直接操作的元素

非表单元素：
div、span、table、tr、td、li、h1~h6、p
即用户页面上不能直接操作的元素

4.创建元素和添加元素
创建元素
$(“内容”);例如

a div

添加元素

前追加子元素：
a.指定元素.prepend("内容")；在指定元素内部的最前面追加内容，内容可以是字符串、JQuery对象、html元素。
b.$("内容").prependTo(指定元素)；把内容追加到指定元素内部的最前面，内容可以是字符串、JQuery对象、html元素。后追加子元素：
a.指定元素.append("内容")；在指定元素内部的最后面追加内容，内容可以是字符串、JQuery对象、html元素。
b.$("内容").appendTo(指定元素)；把内容追加到指定元素内部的最后面，内容可以是字符串、JQuery对象、html元素。前追加同级元素：
before(); 在指定元素的前面追加同级元素后追加同级元素：
after();在指定元素的后面追加同级元素

常用的是prepend()和append()

添加元素时，
如果元素本身不存在（新建的元素），此时会将元素添加到指定位置。
相反，元素本身存在，那么此时会将元素剪切到指定位置。

方法前面都需要通过选择器选中元素，再调用操作的方法。

5.删除元素

remove()；删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove();empty();清空元素内容，保留标签。
指定元素.empty();

remove()比较常用。
6.获取指定元素并遍历

指定元素.each(function(index,element){
console.log(element);
console.log(this);
//此时的this==element;
});指定元素.each(function(){
console.log(this);
});

遍历得到的结果是DOM对象，需要$(this);进行转换为JQuery对象。

7.预加载事件
ready()加载事件；
当页面的DOM结构加载完毕之后执行；
类似于js的load事件；
ready事件可以写多个；

语法：$(document).ready(function(){
})；
简写：$(function(){
});

在使用第三方插件时，等待第三方插件加载后才能调用它的方法。此时可以用ready。

五、绑定事件
绑定单个事件：

1.bind绑定
$("元素名").bind("事件类型",function(){
});
2.直接绑定
$("元素名").事件名(function(){
});

click事件：
jq:$(“#id属性值”).click(function(){
//具体实现
$(this).prop(“disabled”,true);//不可点击
// $(this)，把获取到的DOM对象转换成JQ
});
js:document.getElementById(“id属性值”).οnclick=function(){
//具体实现
}

绑定多个事件：

bind绑定
1.同时为多个事件绑定同一个函数
$("元素名").bind("事件类型 事件类型 ...",function(){});
2.为元素绑定多个事件，并设置对应的函数
$("元素名").bind("事件类型"，function(){
}).bind("事件类型"，function(){
})
3.为元素绑定多个事件并设置对应的函数
$("元素名").bind({"事件类型":function(){},"事件类型":function(){}
});
直接绑定(最常用)
$("元素名").click(function(){}).mouseout(function(){});

直接绑定比较常用；
对元素设置鼠标图标，style=“cursor:pointer”

六、JQuery和AJAX的使用
AJAX也是js框架，特点是异步的，且是无刷新的。
异步就是说不需要同步等待,即服务器处理的时候我们不需要等待。
无刷新就是说不需要页面重新加载，我们还在页面原来的位置，即ajax会进行一个局部刷新，对我们影响甚微。
1.$.ajax
JQuery调用ajax方法： $.ajax({});
参数：

type:请求方式GET/POST
url:请求地址url
async:是否异步，默认是true，表示异步
data:发送到服务器的数据
dataType:预期服务器返回的数据类型
contentType:设置请求头
success:请求成功时调用的函数
error:请求失败时调用的函数

$.ajax({
type:“get”,
url:“”,
data:{
//请求数据为json对象，例如name:“zhangsan”
//若没有参数，则不需要设置
},
dataType:“json”,//预期返回的数据类型，如果是json格式，则在接收到返回值时会自动封装成json对象，
success:function(data){
//在请求成功时，对接收的数据进行处理
},

});
$.get()

1.发送get请求，只有请求地址url，忽略返回值
$.get("url");
2.发送get请求,有请求地址url和请求参数，忽略返回值
$.get("url",params);//params为json格式
3.发送get请求，有请求地址url，请求成功后有返回值
$.get("url",function(data){
//对返回值进行处理
});
4.发送get请求,有请求地址url和请求参数，且请求成功后有返回值
$.get("url",params,function(data){
//对返回值进行处理
});

post请求：
只需要将get改成psot即可；
$.getJson();
即将返回值装换成json格式。其余跟 $.get();一样。

总结：
1.JQuery和AJAX的使用流程，首先，使用JQuery形式的选择器选中指定的元素；其次对元素操作，一般是先获取指定元素（表单元素）的值，然后封装成json格式；最后，请求成功后，对返回的参数进行处理，将数据进行局部渲染。
2.JQuery是对Js的一个封装；JQuery内部封装很多了方法，用起来更方便。
从选择器，到元素的操作，再到ajax异步请求。

JQuery框架总结相关推荐

jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
web前端学习day_04:jQuery框架
jQuery框架作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率 jQuery就是一个通过js语言所以写的框架由于jQuery框架就是js语言所写,引入 ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转载]浅析jQuery框架与构造对象
浅析jQuery框架与构造对象这是一些分析jQuery框架的文字针对jQuery 1.3.2版本面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉 ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
jQuery框架的简单使用（H5）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>作业& ...
从零实现一个简易jQuery框架之一—jQuery框架概述
我们知道,不管学习任何一门框架,了解其设计的理念.目的.总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的.因此在这里先梳理一下本人对jQuery框架的一些理解. 设计目的(为什么要 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第十天：实战jQueryUI常用功能
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...

JQuery框架总结

JQuery框架总结相关推荐

最新文章

热门文章