jquery学习笔记

最新推荐文章于 2024-08-09 15:57:01 发布

安＿

最新推荐文章于 2024-08-09 15:57:01 发布

阅读量39

点赞数

分类专栏：学习笔记文章标签： jquery 学习笔记

本文链接：https://blog.csdn.net/weixin_44277893/article/details/134024600

版权

学习笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

jQuery：

jQuery是js库，
库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方，放的用js代码写的function
jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化
JavaScript 对 HTML DOM 操作
官网地址： https://jquery.com/
原文翻译：
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。它通过易于使用的 API 在大
量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。通
过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

为什么[why]使用 jQuery
非常重要的理由就是：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器
处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX
异步对象。
其他优点：
（1）写少代码,做多事情【write less do more】（2）免费，开源且轻量级的 js 库，容量很小
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX
功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）
（7）出错后，有一定的提示信息
（8）不用再在 html 里面通过

下载：https://jquery.com/
jquery-3.5.0.min.js代表的是压缩的意思，因为B/S架构是需要将jquery传送到浏览器是占用资源的，使用min能节省资源，便于网络传输。
未压缩的jquery=3.5.0.js便于开发的使用，压缩就是把文件的空格换行全部取消了，非常难看，没压缩保存了js代码的样式。

dom对象和jquery对象
dom对象，使用javascript的语法创建的对象叫做dom对象，也就是js对象。
DOM 对象
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展
标志语言的标准编程接口。
通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节
点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
html，button，text等有方法和属性，通过这些属性方法操作dom对象。

var obj= document.getElementById(“txt1”); obj是dom对象，也叫做js对象
obj.value;

JavaScript 对象和 jQuery 对象
用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对
象的 API。用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便，
我们都是将 JavaScript 对象转化成 Jquery 对象
jquery对象：使用jquery语法表示对象叫做jquery对象，注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。也就是jquery对象。它是一个数组。
现在数组中就一个值。

dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ，语法： $(dom对象)
jquery对象也可以转为dom对象，语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0).

为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
当你的dom对象时，可以使用dom对象的属性或者方法，如果你要想使用jquery提供的函数，必须是jquery对象才可以。

 <script type="text/javascript">
		function btnClick(){
			//获取dom对象
			var obj = document.getElementById("btn");
			//使用dom的value属性,获取值
			alert("使用dom对象的属性="+obj.value)
			
			//把dom对象转jquery,使用jquery库中的函数
			var jobj = $(obj);
			//调用jquery中的函数,获取value的值
			alert( jobj.val() )

		}
		function btnClick(){
			//使用jquery的语法,获取页面中的dom对象
			//var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
			var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
			//alert( obj.value)
			
			var num  = obj.value;
			obj.value = num * num;
		}

jqery $符号的封装：

</head>
<body>
	<input type="text" id="txt1" value="我是txt1" /> <br/>
	<input type="text" id="txt2" value="我是txt2" /> <br/>
	<input type="button" value="单击按钮 1 " onclick="fun1()" /> <br/>
	<input type="button" value="单击按钮 2 " onclick="fun2()" />
	
</body>

	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		/* 
		  1.  $(document) ,  $是jQuery中的函数名称， document是函数的参数
		       作用是 document对象变成  jQuery函数库可以使用的对象。 
		  2.  ready：是jQuery中的函数， 是准备的意思， 当页面的dom对象加载成功后
		      会执行ready函数的内容。  ready 相当于js中的onLoad事件
		  3.  function()自定义的表示onLoad后要执行的功能。
		*/
		/* $(document).ready(function(){
			//自定义的功能代码
			alert("Hello jQuery")
		}) */
		
		
		//以下是简化方式
		$( function(){
			//代码内容
			alert("Hello JQuery 快捷方式")
		  }    
		) 
	
	</script>
	$(document).ready()与$()、jQuery()、window.jQuery()是等价的，所以$(document).ready()可以

写成 $(function() { alert(“Hello jQuery”) } );
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
在js中
注册事件方式
回调函数的特点:由其他程序负责调用该函数

注册事件的第一种方式，直接在标签中使用事件句柄

第二种注册时间的方式，使用js代码完成事件注册

第三种注册方式
使用匿名函数

var mybtn1 = document.getElementById(“mybtn”);
mybtn1.onclick = function(){ // 匿名函数,这个匿名函数也是一个回调函数.
alert(“test…”); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
}
总结其方式
将其合并

document.getElementById(“mybtn”).onclick = function(){
alert(“test22222222…”);
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++=

3.选择器：就是一个字符串，用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
常用的选择器：
1） id选择器，语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。通过id找对象， id在当前页面中是唯一值。

2） class选择器， 语法： $(".class样式名)
    class表示css中的样式， 使用样式的名称定位dom对象的。


3） 标签选择器， 语法： $("标签名称")
    使用标签名称定位dom对象的
4）.所有选择器

语法： $(“ * ”) 选取页面中所有 D OM 对象。 5 ）组合选择器组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 i d ， c l a ss ，标签名等。语法：$ (“id,class,标签名”)
function fun1(){
//id选择器
var obj = $(“#one”);
//使用jquery中改变样式的函数
obj.css(“background”,“red”);
}

		function fun2(){
			//使用样式选择器
			var obj = $(".two");
			obj.css("background","yellow");
		}
		
		function fun3(){
			//标签选择器
			var obj = $("div"); //数组有3个对象
			//jquery的操作都是操作数组中的全部成员.
			//所以是给所有的div都设置的背景色
			obj.css("background","blue");
		}
		
		function fun4(){
			var obj = $("*");
			obj.css("background","green");
		}
		
		function fun5(){
			var obj = $("#one,span");
			//obj.css("background","red");
			
			 //obj是一个数组, 有两个成员, 1 是span dom对象
			 //$(  obj[1] ) : jquery对象
			// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
			$(  obj[1]  ).css("background","green");//就是span
			
		}
		
		document.getElementById("one"); //js的语法规则 ,value
		$("#one"); //jquery语法
		
	</script>
</head>
<body>
	<div id="one">我是one的div</div><br/>
	<div class="two">我是样式是two的div</div>
	<br/>
	<div>我是没有id，class的div</div>
	<br/>
	<span class="two">我是span标签</span>
	<br/>
	<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
	<br/>
	<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
	<br/>
	<input type="button" value="使用标签选择器" onclick="fun3()" /> 
	<br/>
	<input type="button" value="所有选择器" onclick="fun4()"/>
	<br/>
	<input type="button" value="组合选择器" onclick="fun5()"/>
</body>

表单选择器，

获取input标签中type的类型js写法如下：

var type = document.getElementById(‘Id’).type

type会等于’hidden’或者’text’或者’radio’等等。

jq的$(“#id”).type获取失败了，不是这么用的，如下就是jq的获取方法。

var type = $(“#id”).attr(“type”);

使用标签的type属性值，定位dom对象的方式。
语法： $(“:type属性值”)
例如： $(“:text”) ,选择的是所有的单行文本框，
$(“:button”) ,选择的是所有的按钮。

</head>
<body>
	<input type="text" value="我是type=text" /><br/>
	<br/>
	<input type="radio" value="man" /> 男 <br/>
	<input type="radio" value="woman" /> 女 <br/>
	<br/>
	<input type="checkbox" value="bike" /> 骑行 <br/>
	<input type="checkbox" value="football" /> 足球 <br/>
	<input type="checkbox" value="music" /> 音乐 <br/>
	<br/>
	<input type="button" value="读取text的值" onclick="fun1()"/>
	<br/>
	<input type="button" value="读取radio的值" onclick="fun2()"/>
	<br/>
	<input type="button" value="读取checkbox的值" onclick="fun3()"/>
</body>

5.过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用，必须和选择器一起使用。

1） $(" 选择器 : f i rs t ") : 第一个 d o m 对象 2 ）$ (“选择器:last”): 数组中的最后一个dom对象
3） $(" 选择器 : e q (数组的下标) ") ：获取指定下标的 d o m 对象 4 ）$ (“选择器:lt(下标)”) ：获取小于下标的所有dom对象
5）$(“选择器:gt(下标)”) ：获取大于下标的所有dom对象

</head>
<body>
	<input type="text" id="txt" />
	<div id="one">我是div-0</div>
	<div id="two">我是div-1</div>
	<div>我是div-2
	    <div>我是div-3</div>
		<div>我是div-4</div>
	</div>
	<div>我是div-5</div>
	<br />
	<span>我是span</span>
	
	<br/>
	<input type="button" value="获取第一个div" id="btn1"/>
	<br/>
	<input type="button" value="获取最后一个div" id="btn2"/>
	<br/>
	<input type="button" value="获取下标等于3的div" id="btn3"/>
	<br/>
	<input type="button" value="获取下标小于3的div" id="btn4"/>
	<br/>
	<input type="button" value="获取下标大于3的div" id="btn5"/>
</body>

6.表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled ,
不可用状态 disabled
选择状态， checked ，例如radio， checkbox

</head>
<body>
	<input type="text"  id="txt1" value="text1" /><br/>
	<input type="text"  id="txt2" value="text2" disabled="true"/><br/>
	<input type="text"  id="txt3" value="text3" /><br/>
	<input type="text"  id="txt4" value="text4" disabled/><br/>
	<br/>
	<input type="checkbox" value="游泳" />游泳 <br/>
	<input type="checkbox" value="健身" checked />健身 <br/>
	<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
	<br/>
	<select id="yuyan">
		<option value="java">java语言</option>
		<option value="go" selected>go语言</option>
		<option value="python">python语言</option>
	</select>

	<br/>
	<input type="button" value="设置可以的text的value是hello" id="btn1"/>
	<br/>
	<button id="btn2">显示选中的复选框的值</button>
	<br/>
	<button id="btn3">显示选中下拉列表框的值</button>
</body>

val
操作数组中 DOM 对象的 value 属性.
$(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值
2.text
操作数组中所有 DOM 对象的【文字显示内容属性】
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接
为一个字符串返回
$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值
3.attr 对 val, text 之外的其他属性操作
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

2.4.2 第二组
1.hide
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来
2.show
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来
3.remove
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除
4.empty
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除
5.append
为数组中所有 DOM 对象添加子对象
$(选择器).append(“

我动态添加的 div

”)
6.html
设置或返回被选元素的内容（innerHTML）。
$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。

(选择器) . h t m l (值) ：有参数调用，用于设置 D OM 数组中所有元素的内容。 7. e a c h e a c h 是对数组， j so n 和 d o m 数组等的遍历, 对每个元素调用一次函数。语法 1 ：

.each( 要遍历的对象, function(index,element) { 处理程序 } )
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 } )
index: 数组的下标
element: 数组的对象

7.each语法
1). 可以对数组， json ，dom数组循环处理。数组， json中的每个成员都会调用一次处理函数。
var arr = { 1, 2, 3} //数组
var json = {“name”:“lisi”,“age”:20 }
var obj = $(“:text”);

 语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，
         都会执行后面的“处理函数”一次。

 $: 相当于是java的一个类名
  each:就是类中的静态方法。
  静态方法调用，可以使用 类名.方法名称 

  处理函数:function(index, emelent) :
     index, element都是自定义的形参， 名称自定义。
	  index：循环的索引
	  element：数组中的成员

 js循环数组：
  for(var i=0;i<arr.length;i++){
     var item = arr[i]; //数组成员
		//操作数组成员
		shuchu( i , item);
  }

 function shuchu(index, emlemnt){
    输出index ，element
  }

2).循环jquery对象， jquery对象就是dom数组
jquery对象.each( function(index,element) {} )

jquery中给dom对象绑定事件
1） $(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个，这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分，例如 js中的单击事件 onclick(),
jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
```
 例如给id是btn的按钮绑定单击事件
 $("#btn").click(funtion(){
   alert("btn按钮单击了")
 })
```

//在dom对象创建好后,绑定事件
$(function(){
$(“#btn1”).click(function(){
//使用append增加dom对象
$(“#mydiv”).append(“”);
//使用on给按钮绑定事件
$(“#newBtn”).on(“click”,function(){
alert(“新建的按钮被单击了”);
})
})

		})
				</script>
</head>
<body>
	
	<div id="mydiv">
		我是一个div ，需要增加一个button
	</div>
	
	<input type="button" value="创建一个button,绑定一个click" id="btn1"/>
	<br/>
	
</body>

on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
on机制可以实现动态绑定
事件名称：就是js事件中去掉on的部分，例如js中onclick ,这里就是click
事件的处理函数： function 定义。

例如，
$(“#btn”).on(“click”, function() { 处理按钮单击 } )

使用jquery的函数，实现ajax请求的处理。
没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。 jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。

1） $.ajax() : jquery中实现ajax的核心函数。
2） $.post() : 使用post方式做ajax请求。
3） $.get() : 使用get方式发送ajax请求。

$. p os t () 和$ .get() 他们在内部都是调用的 $.ajax()

$相当于类名，ajax()；相当于函数，静态方法调用使用类名.方法名称。

 介绍 $.ajax函数的使用， 函数的参数表示请求的url， 请求的方式，参数值等信息。
 $.ajax()参数是一个json的结构。

  例如： $.ajax(  {名称:值， 名称1:值1..... } )

         例如： $.ajax(  {  async:true , 
			                   contentType:"application/json" , 
			                   data: {name:"lisi",age:20 },
									 dataType:"json",
									 error:function(){
                              请求出现错误时，执行的函数
									 },
									 success:function( data ) {
                             // data 就是responseText, 是jquery处理后的数据。

									 },
									 url:"bmiAjax",
									 type:"get"
								  }  
									 
							  )

 json结构的参数说明：

  1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
        xmlHttp.open(get,url,true),第三个参数一样的意思。
  2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
                例如你想表示请求的参数是json格式的， 可以写application/json
 3)data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据
  4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
      当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
		读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
		返回你需要的数据格式。
  5)error: 一个function ，表示当请求发生错误时，执行的函数。
    error:function() {   发生错误时执行  }  

 6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
          之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。

  7)url:请求的地址
  8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。

主要使用的是 url , data ,dataType, success .