01-10jQuery框架

Zyangxsir2024-01-16 10:14
  • jQuery框架

jQuery框架

概念：jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码。

特点：

(1) 具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁

(2) 拥有大量的选择器，不仅有高效灵活的css选择器【id,类，元素】，并且可对CSS选择器进行扩展

(3) 拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）

(4) jQuery兼容各种主流浏览器，兼容性更强

(5) 很多API都方法化了

jQuery的核心思想：（write less，do more）写得更少，做得更多

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

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

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

一、与JS比较

js 复制代码 
    <script>
        //js中的页面加载事件：当整个页面加载完成(节点，样式，图片等)之后才会执行里面的代码
        window.onload = function(){
            alert(111);
        }
        window.onload = function(){
            alert(222);
        }
        //jQuery页面加载事件：加载时机是节点加载完成就执行了
        $().ready(function(){
            alert(333);
        })
        jQuery(function(){
            alert(444);
        });
        //执行顺序 333 - 444 - 222
        /*
            1.jQuery页面加载事件一定都会执行，而js中的页面加载事件只会执行最后一个 
            2.jQuery页面加载事件优先执行 (这个需要看版本)
        */

        /*
            以后页面中会引入多个前端框架：如果有2个前端框架都定义了$。
            你再页面中用$符号是哪一个框架的
        */
    </script>

二、jQuery版本介绍

jQuery是一个js框架，代码本质上就是js代码，使用时需要引入jQuery.js 注意需要先导包 ！！！

js 复制代码 
// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

三、 jQuery编程步骤

  1. 引入jQuery
js 复制代码 
// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
  1. 编写jQuery入口函数即页面加载事件
js 复制代码 
$(function(){})       // 多个$(function(){})中的代码都会执行，多个window.onload只会执行最后一个
  1. 使用选择器定位到需要操作的节点
js 复制代码 
var $obj = $("body"); // 一般情况下为了避免dom对象与jquery对象混淆，可以将jquery对象的变量名用加上$前缀  即$obj 
注：$()即$函数，body：选择器（元素选择器）
  1. 调用jQuery的API进行后续操作

四、DOM对象与jQuery对象转换

  • DOM对象

getElementById()

getElementsByName()

getElementsByTagName()

window对象，document对象

parentNode获取的对象

即我们用传统的方法（javascript）获得的节点对象

  • jQeury对象

通过选择器和$函数获取的节点对象。实质就是通过jQuery包装DOM对象后产生的对象

  • 将Dom对象转换成jquery对象
js 复制代码 
$(dom对象)
例如：var $obj = $(obj);

//------------------------------------------------------------
<div id="d1">易烊千玺</div>
var div1 = document.getElementById("d1");    //jQuery对象相当于对dom对象的封装，可以看成将dom对象的数组
//dom对象 转换成 jQuery对象 
var $div2 = $(div1);   // $(dom对象)
$div2.css("color","red"); // 调用jQuery方法设置样式
  • 将jQuery对象转换成dom对象：
js 复制代码 
var obj = $obj.get(0); 
var obj = $obj[0,1,2...];

//------------------------------------------------------------
var $div = $("div"); // 获取jQuery对象
//jQuery对象 转换成 dom对象
var div1 = $div[0]     // 或者使用  $div.get(0)来获取对象 
div1.style.backgroundColor = "pink"; // 此时div1是通过下标获取到的，jQuery对象将dom对象放进了一个数组里面

注：dom对象与jQuery对象的方法和属性不能混淆，jQuery对象不能调用dom对象的属性和方法

五、jQuery选择器

  1. 基本选择器

Id选择器： id="d1" 调用方法 #d1

类/class选择器: class="c1" 调用方法.c1

元素选择器： p 调用方法 p

  1. 基本过滤选择器

:first - 第一个

:last - 最后一个

:eq(index) - 指定索引的

js 复制代码 
$("li:first").css("color","red"); // 第一个li
$("li:last").css("color","lime");
$("li:eq(1)").css("color","gray"); // 索引为1的li
  1. 属性选择器

属性名\] - 有指定属性的 \[属性名="属性值"\] - 有指定属性和属性值的 ```Js $("li[id]").css("color","yellow"); // 设置li标签下属性名为id的对象 $("li[id='d2']").css("color","blue"); // 设置li标签下属性名为id=d2的对象 ```

  1. 层次选择器
  • ul li 选择<ul>里面的所有<li>元素；
  • div > p 选择所有直接子元素是<div>的<p>元素；
  • h1 + p 选择紧跟在<h1>元素后紧挨着的<p>元素； 就是跟h1同级的第一个标签

六、jQuery事件绑定/注册

  1. Js事件绑定/注册
  • 直接绑定到元素中
js 复制代码 
<a href="javascript:void(0);" onclick="functionName();"/> // 点击后执行functionName()
  • dom对象.事件
js 复制代码 
document.getElementById("id").onclick=function(){  //点击后执行function中的方法
    //逻辑代码
}
  1. jQuery事件绑定/注册
  • 绑定事件
js 复制代码 
$obj.事件名称(function(){  //obj就是可能是任意对象  一般都是通过选择器来找到需要绑定事件的元素
	//逻辑代码
});
$obj.on("事件名称", function(){
	//逻辑代码
});
$obj.bind("事件名称", function(){
	//逻辑代码
});
  • 取消事件
js 复制代码 
$obj.off("事件名称");    // 通常用于移除通过 on() 方法添加的事件处理程序。
$obj.unbind("事件名称");   // 移除被选元素的事件处理程序  当事件发生时终止指定函数的运行。
注意：如果取消事件时不写时间名称，表示取消所有事件

七、jQuery的DOM操作

  1. 文本操作

1.1 API

html()： 设置或者获取双标签中的的html文本

text()：设置或者获取双标签中的纯文本

val()：设置和获取有value属性的标签的value属性值

有value属性值的元素【大多数单标签都有】：input【按钮，文本框等】、select中option等

没有value属性值的元素【大多数双标签没有】：div、hn、span、a、p等

js 复制代码 
// 需求：当鼠标进入div显示红色的"有敌军潜入"，鼠标移开div还原

<div style="height: 150px;width: 150px;background-color: green" id="d1"></div>
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#d1").mouseover(function(){
			$(this).html("<span style='color:red'>有敌军潜入</span>");
		});
			
		$("#d1").mouseout(function(){
			$(this).text("");
		});
	});
</script>
  1. 属性和样式操作

2.1 API

操作样式：css()，addClass()，removeClass()

js 复制代码 
.css() // 直接设置样式 
.css("width",200).css("height",300)

.addClass() // 向第一个 <p> 元素添加一个类名 这样就方便在head里面设置样式，然后通过类名设置样式，这样可以解决.多个css，防止记不住属性名
$("button").click(function(){
    $("p:first").addClass("intro");
});

.removeClass() // 从所有的 <p> 元素移除 "intro" 类：
$("button").click(function(){
    $("p").removeClass("intro");
});

操作属性：

attr()：操作【设置或获取】非boolean属性值的属性

prop()：操作【设置或获取】boolean属性值的属性（checked单选框复选框，selected下拉框）

data()：h5出的API，可以自定义属性data-属性名="属性值"，然后用data("属性名")获取可以自动转换。一般用于传递数据

注意：要自动转换的话属性值必须是标准格式就是双引号，不能使用单引号

removeAttr()：移除指定属性值

js 复制代码 
// 需求：鼠标移动到元素上改变背景颜色，点击改变属性和样式

<a href="javascript:;">File</a>
<a href="javascript:;">Edit</a> 
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
	$(function(){
		var $as = $("a");//jQuery对象
		for(var i = 0 ; i < $as.length ; i++){
			var a = $as[i];//dom对象
			//$(a)  将dom对象转换成jQuery对象，才能使用方法
			$(a).mouseover(function(){
				$(this).css('backgroundColor','skyblue');
			});
			$(a).mouseout(function(){
				$(this).css('backgroundColor','white');
			});
			$(a).click(function(){
				alert("当前元素的跳转地址为：" + $(this).attr('href'));
				$(this).addClass('c1');
			});
		}
	});
</script>

2.2 data()与其他API区别

概念：自定义数据属性，也就是data-自定义属性。

注意事项：

(1) 使用data获取属性值 有个前提，属性名必须是data-xxx。使用data()获取属性 的语法格式：jQuery对象.data("xxx")

(2) 使用attr()获取属性的语法格式：jquery对象.attr("属性名")

js 复制代码 
<input type="text" id="d1" 

		data-person='{"id":1,"name":"tom","address":"四川成都"}'  // 自动将json格式的字符串转换成json对象
		data-name="赵子龙" 
		data-age="22" 
		data-sex="true" />
            
<script type="text/javascript">
    $(function(){
        console.log($('#d1').attr('data-person'));//获取出来都是字符串
        console.log($('#d1').attr('data-name'));//获取出来都是字符串
        console.log($('#d1').attr('data-age'));//获取出来都是字符串
        console.log($('#d1').attr('data-sex'));//获取出来都是字符串
        console.log("====================================");
        //获取出来出来的值，会自动转换成相应的类型。能转就转，不能转就以字符串的形式存在
        console.log($('#d1').data('person'));
        console.log($('#d1').data('name'));
        console.log($('#d1').data('age'));
        console.log($('#d1').data('sex'));
    });
</script>
  1. 元素操作

3.3 API

追加：append()

删除：remove()，删除会将当前元素和里面的所有内容删除掉

清空：empty()，清空会保留当前元素

JSON

概念：JSON 是用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。

  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言。
  • JSON 易于理解。
JS 复制代码 
// json对象
           var obj1 = {"id":1,"name":"jack","age":20}
           //alert(obj1.name);
           var obj2 = {"id":1,"name":"jack","address":{"street":"陕西街","no":"125号"}}
          // alert(obj2.address.street);
           var obj3 = [{"id":1,"name":"jack","age":20},{"id":2,"name":"tom","age":30}]
           //alert(obj3[1].name);

           //json格式的字符串
           var str = ' {"id":1,"name":"jack","age":20}';
           //转json对象：要求必须是标准格式 -   也就是外面是单引号，里面属性是双引号,数字不用
           alert(JSON.parse(str).name);

           //data-*是html5出来的属性，为了传递数据 - 自动将json格式的字符串转成json对象
           //1.申明的时候必须用data-*  2.获取的时候：data(*)
           console.log($("div").data("obj"));

八、 jQuery遍历

场景：例如有多个input按钮，获取每个按钮的value值

第一种：传统的遍历方式

Js 复制代码 
var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){
    alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}

第二种：jQuery提供的each函数

js 复制代码 
//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点
$obj.each(function(this){  // this表示每个对象
	alert($(this).val());
});

九、 jQuery发异步请求

方法1：

js 复制代码 
<input type="button" value="添加数据"/>
$(function(){
     $("input").click(function(){
	 $.get("url",data,callback,type);
	 $.get(
     "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",
     {"name":'tom'},
     function(data){
         console.log(data);
     },
     "json"
 )

方法2：

js 复制代码 
$(function(){
    $("input").click(function(){
		$.ajax({
           url: "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",                  //请求地址
           type: "GET",                       //请求方式
           data: "eid=1&ename=tom",         //请求参数：格式1：key=value  格式2：json格式
           success: function (result) {    //请求成功后的回调函数，result是服务器返回的数据  
           console.log(result);
           },
           dataType: "json"                 //如果是json，服务器返回值就是json对象，直接使用
           //如果不指定dataType，就是普通文本
          });
      })
});
相关推荐
乘风!3 天前
前端Jquery,后端Java实现预览Word、Excel、PPT，pdf等文档
pdf·word·excel·jquery
.NET修仙日记19 天前
jQuery面试题精选：从基础到高级
前端·javascript·jquery
.生产的驴19 天前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
一枚前端小能手22 天前
🔧 jQuery那些经典方法，还值得学吗？优势与式微的真相一次讲透
前端·javascript·jquery
enki081524 天前
【CANN训练营】+开源之星+GitCode算子开发环境快速搭建手册
javascript·ecmascript·jquery
yqwang_cn1 个月前
打造优雅的用户体验：自定义jQuery工具提示插件开发全解析
前端·jquery·ux
你的电影很有趣1 个月前
lesson70：jQuery Ajax完全指南：从基础到4.0新特性及现代替代方案引言：jQuery Ajax的时代价值与演进
javascript·ajax·jquery
linuxxx1101 个月前
ajax与jQuery是什么关系？
ajax·okhttp·jquery
霍格沃兹_测试1 个月前
软件测试 | 测试开发 | 接口测试 Mock 实战(二) | 结合 jq 完成批量化的手工 Mock
jquery
05Nuyoah1 个月前
Day 02 HTML的基础
前端·javascript·css·html·firefox·jquery·html5
热门推荐
01GitHub 镜像站点02《大数据技术原理与应用》实验报告三 熟悉HBase常用操作03UV安装并设置国内源04综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件05BongoCat - 跨平台键盘猫动画工具06Linux下V2Ray安装配置指南07npm使用国内淘宝镜像的方法08jdk21下载、安装（Windows、Linux、macOS）09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10GitLab 零基础入门指南：从安装到项目管理全流程