jQuery基础(一)

置顶李家一只慧

于 2022-11-29 15:21:25 发布

阅读量297

点赞数

分类专栏： javaScript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m7k7k999/article/details/128097531

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本概念和使用方法，包括如何引入jQuery库、创建JSON对象、操作数组和对象属性，以及jQuery的选择器和方法。此外，还详细讲解了JavaScript对象与jQuery对象之间的转换，强调了DOM操作的便捷性。

摘要由CSDN通过智能技术生成

3.2json创建一个数组,数组中有三个对象

3.3json创建一个对象，其中一个属性是数组

3.4.jQuery入门

jQuery 语法实例

3.5js对象和jQuery对象的相互转换

1.jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.jQuery的使用

首先进入jQuery官网获取jQuery库文件,下载jQuery库文件

*http://jquery.com/

jquery库分为开发板和发布版,两种版本有细微的差别

名称	大小	说明
jQuery-3版本号js(开发版)	约268KB	完整无压缩版本,主要用于测试学习和开发
jQuery-3版本号min.js(发布版)	约91KB	经过工具压缩,或经过服务器Gzip压缩,主要用于发布产品和项目

3.初识jQuery

3.1json简化创建自定义对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简化创建自定义对象的方式</title>
</head>
<body>
	<!-- js方式定义Person对象 -->
	<script type="text/javascript">
	    function Person(id,name,sal) {
	    	this.id = id;
			this.name = name;
			this.sal = sal;
		}
		var p = new Person(1,"杨",7000);
	    document.write("编号"+p.id+"<br/>");
		document.write("姓名"+p.name+"<br/>");
		document.write("薪水"+p.sal+"<br/>");

	</script>

	<hr/>

	<!-- json方式定义Person对象 -->
	<script type="text/javascript">
		var d = {
			id :1,
			name:"李",
			sal :8000
		}
		document.write("编号"+d.id+"<br/>");
		document.write("姓名"+d.name+"<br/>");
		document.write("薪水"+d.sal+"<br/>");
		//属性里面可以使单引号,或者双引号,字符串必须加单引号或双引号,其他类型比价读好
		
	</script>
</body>
</html>

3.2json创建一个数组,数组中有三个对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>创建一个数组，数组中有三个对象</title>
</head>
<body>
<!--json数组-->
	<script type="text/javascript">
		var js = [
			{
				id:1,
				name:"张"
			},
			{
				id:2,
				name:"思"
			},
			{
				id:3,
				name:"嘉"
			}
		];

	</script>
	<script type="text/javascript">
		/*遍历数组*/
		/*for(var i=0;i<js.length;i++){
			document.write("编号:"+js[i].id+"<br/>");
			document.write("姓名:"+js[i].name+"<br/>");
		}
		document.write("共有:"+js.length+"个学生<br/>")*/
	</script>
</body>
</html>

3.3json创建一个对象，其中一个属性是数组

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>创建一个对象，其中一个属性是数组</title>
</head>
<body>
   <script type="text/javascript">
      var student = {
         id:1,
         name:"李",
         home:["朝阳","大连","本溪"]
      }
      for (var i=0;i<student.home.length;i++){
         document.write(student.home[i]+"&nbsp")
      }
   </script>
</body>
</html>

3.4.jQuery入门

引入jquery库

在页面中引入jQuery库的方法是HTML文档的头部,加上一行代码

<script type="text/javascript" src="js/jquery-3.3.1.js"></script> <---引入jquery库-->

列表中:

注 :src:是路径js包下的 jquery-3.3.1.js 文件, 这种路径适用于html项目裸露在外面的, 如果在包下,例如我列表中selector包下的html项目引入js路径前面就会加 '..'例如:
../js/jquery-3.3.1.js

jQuery的语法

jQuery的语法格式如下:

$(selector).action();

语法说明 :

工厂函数 $():将DOM对象转换为jQuery对象

选择器 selector :获取需要操作的DOM元素

方法 action(): jQuery提供的方法, 其中绑定事件出来的方法

jQuery 语法实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。
$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。
注 ! : jQuery代码与JavaScript代码类似, 都是在页面中通过<script>标签嵌入jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery入门</title>
	<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input id="inputID" type="button" value="这是jQuery框架，写少代码，多做事情"/>

	<div id="divID"><div>哈哈</div></div>

	<script type="text/javascript">
		//获取<input>标签中的value属性内容
		/*var $input = $("#inputID");
		var input = $input.val();
		alert(input);*/

		//获取div标签中的文本内容
		/*1---1
		var $div = $("#divID");
		var div = $div.text();
		alert( div);*/
		/*1---2*/
		/*$("#divID").text();*/
		var $div = $("#divID");
		var div = $div.html();//html和text的区别:
		                      // html获取里面的元素相当于innerHTML,插入里面的都会输出出来
		                      //div里套div :输出<div>哈哈</div>
		                      //text只会获取里面的文本内容 : 哈哈
		alert( div);
	</script>
</body>
</html>

小提示

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
empty() -清空标签下的内容

3.5js对象和jQuery对象的相互转换

DOM对象与jQuery对象相互转换的原因 ?

DOM对象比较麻烦.为了完成一个功能写很多代码,还要考虑兼容性,而jQuery对象的操作封装成了函数,不用考虑兼容性
jQuery并不是封装了所有方法,编写复杂的功能还是需要原生js实现

DOM对象如何转换成jQuery对象

概述 : 对于一个DOM对象,只需要用 $() 把DOM对象包装起来即可, 就可以获得一个jquery对象了

语法 :

$ (DOM对象)

jQuery对象转换成DOM对象

索引 : jQuery对象是一个类似数组的对象,可以通过[index] 方法得到想用的对象
get(index) : jQuery本身提供了一个get(index)方法,可以通过该方法的到相应的DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js对象和jQuery对象的相互转换</title>
    <!--加入jquery库-->
    <script src="../js/jquery-3.3.1.js"></script>
    <!--加入css样式-->
    <style type="text/css">
        ul.circle {list-style-type:square}
        div{width: 150px;height: 80px;background-color:lightsalmon; align: center}
    </style>
</head>
<body>
   <input id="inputID" type="button" value="这是jQuery框架，写少代码，多做事情"/>

   <div>
       <!--无序列表-->
       <ul class="circle">
           <li>学好</li>
           <li>jquery</li>
           <li>要多学多练</li>
       </ul>
   </div>

   <script type="text/javascript">
        //获取input标签value属性的内容[js-->jQuery]
         /*var inputElement = document.getElementById("inputID");
         var $input = $(inputElement);
         alert($input.val());*/

        //获取li标签的文本内容 [js-->jQuery]
        /*var liNode = document.getElementsByTagName("li");
        var $li = $(liNode);
        alert($li.text());*/

        //获取input标签value属性的内容 [jQuery-->js]
        /*方式一*/
        //alert($("#inputID")[0].value);
        /*方式二*/
        //alert($("#inputID").get(0).value);

         //获取li标签的文本内容 [jQuery-->js]
         var $li = $("li");
         //方式一 : 索引
         //var liElement = $li[2];
         /*let li = liElement.innerHTML;*/
         //var li = liElement.innerText;
         //alert(li)
         //方式二 : get(index)
         var liElement = $li.get(2);
         alert(liElement.innerText)
</script>
</body>
</html>

李家一只慧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础(一)

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
复制链接

扫一扫

专栏目录