jQuery笔记_jquery 是否包含括号-CSDN博客

本文链接：https://blog.csdn.net/qq_40981804/article/details/89333054

文章目录

方法技巧

获得select下option的内容和里面的value值

 1、获得内容：var text = $("select_id").find(“option:selected”).text();
 2、获得value值：var value = $("select_id").val ();

一、简介

1、需要支持低版本浏览器的话需要下载jQuery 低版本

2、jQuery是一个原生js的库，封装了好多js的方法，引用过来直接用就可以

1、为了减少js的代码量，多做事

2、花括号在jQuery中表示对象

   定义数组
        var ks = [
 			  {id:”1”,name:”玩具”}，
 			  {id:”2”,name:”服装”} //最后一个对象没有对象
		]

3、版本：

mini版：体积小，开发时经常使用，对源代码也有一定的保护作用
完整版：如果想在JQ上再次进行开发，才会用到完整版

二、将JQ框架引入到jsp页面

 1、把jquery-3.1.1.min.js或jquery-3.1.1.js文件考到web content的js文件夹下
  2、在head中添加<script type="text/javascript" src="js/jquery-3.1.1.min.js "></script>

三、jqure的加载语法：使用$(函数)，可以加载多次

1、加载jQuery方式一：

$( function(){} )基本等同与window.οnlοad=function(){}

注意：原生的load与jQuery加载的区别：
原生加载事件：当你的页面中的HTML，css，js全部加载完之后再执行load事件处理函数的代码，而且一个页面中只允许出现一次window.onload事件。
jQuery的加载：当页面加载的结构加载完就立刻执行jq代码，一个页面可以出现多次。

2、加载jQuery方式二：

$(document).read(function{})

四、jQuery选择器（能够快速实现元素定位功能）

常用

1、根据元素的id号进行定位：

$(“#id号”)
 $(“#id”).hide(1000);设置对象在1S内逐渐隐藏

2、根据元素的class进行定位：

$(“ . 类名”)  例如$(“. class”)

3、根据标签名进行定位：

 $(“标签名”) //可以同时定位多个元素，得到一个数组

4、按照元素的索引号来进行过滤定位

 $(“标签名：eq(索引值)”) 相当于$(“标签名”). eq(索引值)//只有eq可以

冒号后面的参数

序号	参数	描述
1	eq(索引值)	等于
2	gt(索引值)	大于
3	lt(索引值)	小于
4	not	不包含
5	first	定位到大儿子
6	ast	定位到最小的儿子
7	even	定位数组中的索引为偶数的元素
8	odd	定位数组中索引为奇数的元素
9	nth-child(3x+1)	每隔两个取一个(了解)

5、根据层次关系来定位元素

例子：<div><p 属性名=‘属性值’></p>内容<p></p></div>中找第二个p元素            
  法一 、find：关键字即父级元素点find子元素
	         $(“div”).find（“p:eq(1)”）  
   法二、按照类似选择器来定位
			$(“div > p”) 定位到儿子元素
			$(“div  p”) 定位到后代元素

6、层次关系与过滤结构（即带有冒号）可以结合使用

7、按照元素中包含的内容来进行定位，严格区分大小写

 $(“标签名:contains(‘内容’)”)

8、按照元素中包含的属性来进行定位（多数应用到表单元素上）

 $(“标签名[属性]”)//获得多个目标元素
 $(“标签名[属性=属性值]”)//获得单个目标元素

9、特例$(“:hidden”)：用于查询任何不可见元素

  $(“:visible”)：用于查询任何可见元素
  $(“:checked”)：用于查询被选中元素 大多用于checkbox与radio
  $(“:empty”)：选择内容为空的元素，换行节点也不能包括

10、属性选择器：

注意：

1、所有的css选择器都能使用，包括伪类选择器

2、冒号用于条件过滤，例如 $(“标签名：eq(索引值)”)//定位数组中的单个元素
	$(li:gt(1):lt(3))：先选择li下索引大于1的，然后在选择的里面重新编号，再选小于3的

3、选择器得到的是jQuery对象是一个数组

4、jQuery对象是由dom对象组成的一个数组

5、隐式迭代：当你在设置和写的时候，jQuery含有隐式迭代，不需要遍历；在读取的时候只能读取选中的第一个元素

    例如：给所有的li绑定事件： $(“li”).click()<br>
      在事件里面的this指的是DOM对象

选择器汇总

基本选择器

符号	用法	描述
*	$("*")	所有元素
#id	$("#lastname")	id=“lastname” 的元素
.class	$(".intro")	所有 class=“intro” 的元素
element	$(“p”)	所有元素
.class.class	$(".intro.demo")	所有 class=“intro” 且 class=“demo” 的元素

依据索引号

符号	用法	描述
:first	$(“p:first”)	第一个 p元素
:last	$(“p:last”)	最后一个 p元素
:even	$(“tr:even”)	所有偶数 tr 元素
:odd	$(“tr:odd”)	所有奇数 tr元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素 greater than
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素 less than
:not(selector)	$(‘li:not(.list)’)	选中不包含类名为list的li
:header	$(":header")	所有标题元素 h1 - h6
:animated	$(":animated")	所有动画元素```

依据标签的内容

符号	用法	描述
:contains(text)	$(":contains(‘W3cSchool’)")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素、文本）节点的所有元素
:hidden	$(“p:hidden”)	所有隐藏的 p 元素
:visible	$(“table:visible”)	所有可见的表格
s1,s2,s3	$(“th,td,.intro”)	所有带有匹配选择的元素```

依据元素的属性

符号	用法	描述
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href=’#’]")	所有 href 属性的值等于 “#” 的元素
[attribute!=value]	$("[href!=’#’]")	所有 href 属性的值不等于 “#” 的元素
[attribute$=value]	$(" [h r e f$ =’.jpg’]")	所有 href 属性的值包含以 “.jpg” 结尾的元素```

表单元素：

符号	用法	描述
:input	$(":input")	所有元素
:text	$(":text")	所有 type=“text” 的元素
:password	$(":password")	所有 type=“password” 的元素
:radio	$(":radio")	所有 type=“radio” 的元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的元素
:submit	$(":submit")	所有 type=“submit” 的元素
:reset	$(":reset")	所有 type=“reset” 的元素
:button	$(":button")	所有 type=“button” 的元素
:image	$(":image")	所有 type=“image” 的元素
:file	$(":file")	所有 type=“file” 的元素```

特殊的获取

符号	用法	描述
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素```

注意:并且选择器$(‘li:gt(1):lt(3)’),自左向右依次读，每读完一次，索引重新计算

2、Query对象和DOM对象相互转化

1、 jQuery对象转化成DOM对象: $(选择器)[index]/$(选择器).get(index)
2、 DOM对象转成jQuery对象:$(DOM对象)

3、jQuery选择方法

1、获取父级元素

序号	方法	描述
-	$(选择器).parent()	找到父级元素，找到一个元素
-	$(选择器).parents(过滤条件)	找到祖先级,可以传递参数找到指定的祖先级元素
-	$(选择器).closest(过滤条件)	首先看自己是否满足条件，否则往上依次去找祖先级
4.	$(选择器).offsetParent()	获取定位父级 jQuery的定位父级是HTML而JS是body
5.	$(选择器).parentsUntil()	查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

2、获取子代和后代的元素

序号	方法	描述
-	$(选择器).children(过滤条件)	找到指定的直接的孩子
-	$(选择器).find(过滤条件)	找到孩子们可以找到孙子辈

3、获取同级的元素

序号	方法	描述
-	$(选择器).prev()	找到前面一个元素
2.	$(选择器).prevAll(过滤条件)	找到前面所有元素
3.	$(选择器).next()	找到后面一个元素
4.	$(选择器).nextAll(过滤条件)	找到后面所有元素
5.	$(选择器).siblings(过滤条件)	找到所有同级元素，除了过滤条件之外的
6.	$(选择器).prevUntil(过滤条件) $(选择器).nextUntil(过滤条件)	找到前面/后面同级元素直到过滤条件为止，不包括过滤的

4、过滤方法

序号	方法	描述
-	$(选择器).eq(index)	找到选择器选中的第index+1个元素
-	$(选择器).filter(过滤条件)	找到指定过滤条件的那些元素
-	$(选择器).not(过滤条件)	除了过滤条件之外那些元素
-	$(选择器).has(过滤条件)	保留包含特定后代的元素，去掉那些不含有指定后代的元素。

5、特殊方法

add():
把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
addBack():
$(‘div’).find(‘span’).addBack();span div都被选中
end():
$(‘div’).find(‘span’).end():又选中了div

4、 jQuery获取大小/距离的方法

注意在jQuery读元素某些值的时候选中的是第一个元素,在给jquery对象写值的时候就是隐式迭代

序号	方法	描述
1.	$(选择器).width()	元素的宽度
2.	$(选择器).innerWidth()	元素的宽度+padding左右
3.	$(选择器).outerWidth()	元素的宽度+padding左右+border左右
4.	scrollTop()	滚动距离
5.	offset()	返回值是一个对象{left:,top:}获取元素相对文档边界的距离left top
6.	position()	返回值是一个对象{left:,top:}获取的是元素left top

以上方法可读可写

5、获取可视区的大小:$(window).width()/height()

6、文档的大小:$(document).width()/height();

5、jQuery DOM操作

1、获取内容

序号	方法	描述
1	$(选择器).html()	获取/设置元素内所有内容
2	$(选择器).text()	获取/设置元素内的文本内容
3	$(选择器).val()	读取/设置表单元素的value值

val()特殊用法
$(‘input[type=checkbox]’).val([‘val1’,‘val2’])：把value值为val1和val2的复选框选中,select也可以用

2、样式操作

序号	方法	描述
1	$(选择器).css(‘background’,‘red’)	设置一个样式
2	$(选择器).css({设置多个})	设置多个样式
3	$(‘div’).css(‘width’,’+=10px’)	实现累加

3、样式类操作（尽量操作样式类，少直接操作css属性）

序号	方法	描述
1	addClass(一个或多个)	添加一个或多个类名
2	removeClass(不给参数全部移除，给了会移除指定的类)	移除指定类名或者全部移除
3	toggleClass(类名)	切换是否认加上类名
4	hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true。

4、属性操作

序号	方法	描述
1	attr()	读写合体读取或者设置元素的属性，不光可以操纵自定义属性，还可以操纵元素自带的属性。
2	prop()	用法同上，只是在做单选或者多选按钮的时候一般用prop。
3	removeAttr(attr)/removeProp(attr)	移除属性

例子：全选反选的案例，用prop

6、获取索引值

序号	方法	描述
1	$(选择器).index(‘标签名/类名…’)	如果没有参数,那么得到是选择器选中的元素在所有同级的元素中所处的索引位置如果有参数那么得到的结果就是在参数中所处的索引位置

7、jq对象遍历的方法

each方法

序号	方法	描述
1、遍历jQuery对象	$(选择器).each(function(i,el){})	i代表遍历到jq对象对应的索引值，el代表dom对象，遍历到谁就是谁
2、遍历数组元素	$.each(arr,function(i,val){})	i下标，val代表值

例如：
        $.each(ks,function(i ,k){
		})//ks：数组名 function(i ,k)：回调函数  i：循环次数 k：将数组中的每一个元素为JS类型

8、jQuery的节点操作

1、创建节点/元素:

$('<div>内容</div>');//括号里面的必须是闭合的

2、插入元素

1、往元素末尾插入节点/元素:

主动插入：$(选择器).append(创建的节点'):选择器选中的元素末尾插入 
 
被动插入:创建的节点.appendTo($(选择器)):结果同上

2、往元素头部插入节点/元素:

主动插入：$(选择器).prepend(创建的节点):选择器选中的元素头部插入 

被动插入:创建的节点.prependTo($(选择器)):结果同上

3、兄弟元素之后插入节点

主动插入: $(选择器).after(节点):往选择器选中元素之后插入节点  

被动插入:节点.insertAfter($(选择器)) 结果同上

4、兄弟元素之前插入节点

主动插入: $(选择器).before(节点):往选择器选中元素之前插入节点  

被动插入:节点.insertBefore($(选择器)) 结果同上

3、清空/移除

移除元素:$(选择器).remove();  

清空元素:$(选择器).empty();

4、替换

替换节点:$(选择器).replaceWith($(选择器)):相当于剪切粘贴。

$(选择器).replaceAll($(选择器)):结果同上，调用顺序相反

5、克隆节点

克隆节点:$(选择器).clone():只克隆内容，不克隆事件，否则不光克隆内容,克隆事件  

原生js:dom对象.cloneNode(true/'deep');如果不加参数，只克隆标签，否则里面内容也克隆

6、包裹节点

包裹节点: $(“li”).wrap(“<div></div>”)  //用div标签分别包裹li

被包裹的 $(“li”).wrapInner(“<div></div>”) //用li包裹div 

被包裹的 $(“li”).wrapAll(“<div></div>”) //用1个div包裹所有的li 

被包裹的 $(“li”).unWrap()  //删除包裹

9、事件处理

1、原生的JS的所有的事件名称在jq里都有对应的方法

click() mouseover() mouseout() focus() blur().....

2、绑定事件的方法

1、$(选择器).click(匿名函数体/有名函数名);

2、on 绑定事件

a、$(选择器).on(evName,fn);

 $(选择器).on(evName,function(){});

b、绑定多个不重名的事件

$(选择器).on({	
	click:function(){},
	mouseover:function(){}
})

3、off移除事件

$(选择器).off():可以取消所有事件绑定的方式。如果不写参数，那么所有事件全部移除，否则就移除指定的off('click mouseover');

4、事件委托:$(选择器).on(evName,function(e){});

5、one 只执行一次的事件

$(选择器).one(evname,fn)

10、 jQuery的事件对象

简介

1、JS对象：只能调用JS 对象

        var d = document.getElementById(“id”); //d为原生dom对象即JS对象
        d.style.color=”#fff”;

2、JQ对象：只能调用JQ的属性和方法

var d =$(“#id”);// 的为JQ 对象
d.css(“color” , ”#fff”);

3、JS对象与JQ对象相互转换

情况一、将JS对象转化为JQ对象
```
	var d1=$(JS对象);
```

情况二、将JQ对象转化为JS对象

方法一 var d =JQ对象.get(0);//get方法
方法二 var d =JQ对象[0]
       注意：为了区分两个对象，可以在JQ对象的前面加上$符号

方法：

序号	方法	描述
1	e.type	获取事件类型
2	e.target	事件源
3	e.currentTarget	相当于this
4	e.keyCode/e.which	获取键盘的键值
5	e.pageX/e.pageY	获取鼠标的坐标
6	e.preventDefault()	阻止默认行为
7	e.cancelBubble=true / e.stopPropagation()	阻止冒泡

return false;既阻止冒泡又阻止了默认行为

11、动画

简单动画

1、	上拉：slideUp('fast/slow'/毫秒数,回掉函数)//参数可有可无
    			参数：运动的速度："slow","normal", "fast" 或毫秒值，回掉函数
		下拉：slideDown()
		上拉下拉：slideToggle():元素处于上拉时，下拉元素，反之也可以
		
2、show(参数)/hide(参数)/toggle(参数):显示//隐藏

3、fadeIn()/fadeOut()/fadeTo(a,b)：可以指定元素在a毫秒内变化到b/fadeToggle():淡入//淡出

animate动画

方法：

animate(对象,持续时间，运动形式，回掉函数)

参数：

params:一组包含作为动画属性和终值的样式属性和及其值的集合 
 
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) 

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".  

fn:在动画完成时执行的函数，每个元素执行一次。

例子：
$(选择器).animate({width:300,opacity:1…},2000,‘linear/swing’,callBack)

注意：
运动形式扩展：easing.js,如果用了扩展，那么animate的参数至少要传3个即：$(选择器).animate({},time,运动形式);这三个缺一不可

12、ajax的使用（使前端与后台彻底分离）

1、简介：

百度：Ajax：

ript和xml，基于浏览器与服务器的异步数据传输技术。它本身不是一门独立的语言，而是 JavaScript+HTML+CSS+XML+servlet（JSP+ASP+PHP）语言的综合体，更简单的说它是网页数据局部刷新技术。

同步模式：传统的浏览器工作模式是同步模式，即当一个请求没有返回响应时，第二次请求不能发出，所以效率不高，每一对请求与响应，都会刷新一次页面造成用户体验度不高也浪费了网络带宽。

异步模式：现在的浏览器中都隐含着一个组件，在浏览器发送每个请求前先将组件发送给这个组件，然后再由这个组件将每个请求转发给服务器上相应的servlet进行处理，当服务器发出的响应也会先传到这个组件中，然后统一更新，解决了同步模式的不足。这个组件称为XmlHttpRequest简称（XHR），以Xml作为数据载体，以Http为协议，以Request为请求发出

json数据：

Java script object的数据格式，只要服务器上返回的字符串符合JS 对象的格式，在客户端接受时自动转换为JS对象，例如字符串a=[”{\”name\”:\”小明\”}”,对象2，对象3]

 在servlet中简化处理：在alibaba搜索fastjson的jar包引入到项目中
         新建一个JSONObject job=new JSONObject();
                 job.put(key,value);
                  ……
             然后直接out.print(job);在客户端自动转化为json数据类型

注意：

1、如果有多个对象，则借用JSONArrary list=new JSONArrary ();将对象放进集合中传给客户端

list<student> list =dao.select();
JSONArrary list=new JSONArrary ();
for(student s ){ 
				JSONObject job=new JSONObject();
         		  job.put(key,value);
 }
out.print(job);

2、json设置汉字字符集

response.setContentType("application/json;charset=utf-8");

2、控制方式

第一种：JS方法：基本已经淘汰
第二种：JQ方法：经常使用

常用方法 api

1、jQuery.ajax(url,[settings])

2、jQuery.get(url, [data], [callback], [type])：通过服务器端的输出语句调用

概述：

通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

参数：

 url:待载入页面的URL地址
 
data:待发送 Key/value 参数。

callback:载入成功时回调函数。
	function(data){ $(“#c”).val(data)} ：时刻监听服务器端是否有返回响应数据（out.print()语句），当检测到时便开始执行并获得此数据

type:返回内容格式，xml, html, script, json, text, _default。

3、load(url, [data], [callback])：通过某一个特定元素调用

概述：

载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例

参数：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

4、jQuery.getJSON(url, [data], [callback])：

概述：

通过 HTTP GET 请求载入 JSON 数据。在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。注意：此行以后的代码将在这个回调函数执行前执行。

参数：

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

5、jQuery.post(url, [data], [callback], [type])：语法与get方法一样只是请求方式不同

例如：

 $.ajax({

    url:请求的地址,

    data:发送到后台的数据,"name=John&location=Boston"/{name:'John',location:'Boston'}

    dataType:'xml/text/json/jsonp（跨域）/script/html',

     type:get/post,

     success:function(msg){msg就是后台返回的数据},

    error:function(){}
    })

jQuery方法扩展

关键字extend专门用来扩展插件

扩展插件

只有在扩展时，this代表jQuery对象
扩展代码：

  $.fn.extend({
	     gh:function(arr){
		      var arr=arr || ['red','blue'];
		      var children=this.children();
		     children.filter(':odd').css('background',arr[0]);
		     children.filter(':even').css('background',arr[1]);
	       },
	     zoom:function(){
		
	     }
    })

工具方法扩展

扩展代码：

  $.extend({
	      sum:function(arr){
		       var n=0;
		       $.each(arr,function(index,val){
			      n+=val;
		       })
		   return n;
	 }

用jQuery快速处理后台数据（渲染）

[art template 下载](https://github.com/aui/art-template);

==================================================

[轻量性能高的js模板语法](https://aui.github.io/art-template/docs/);

13、关键字

this关键字

1、this：代表了普通的JS对象即原生dom对象
   this.innerTEXT() : 获取/设置html里面的文本内容
   this.checked; 返回一个布尔值，判断元素是否为选中状态
   this.checked =true；将所有的选择框设置为选中状态
           
2、$(this) :代表了功能更强的jQuery对象
      $(this).text():  获取/设置html里面的文本内容

14、常用的函数

1、用于控制元素的显示和隐藏

    hide()/show()[ 元素由大到小]  
    slideUp()/slideDown()[跟表演落幕一样]   
    fadeIn()/fadeout()[淡入、淡出]

注意：必须在括号里面统一加上数字，以毫秒为单位

2、用于对元素的取值或赋值

        text()：将里面所有的内容当作字符串来处理
         html()：自动识别内容里面的HTML语言

3、设置元素的CSS样式

法一、
css(“样式属性名” , ”属性值”)：

法二、

css({
         “width”:”150px”，
         属性名：属性值
         ……
})

4、向input元素进行赋值和取值

val()：无参数代表取值，有参数时代表赋值

5、动态创建元素

$(“<hr/>”);//里面的元素必须是闭合的

6、用于追加新元素的方法

1、大的元素.append(小元素)
2、小的元素.appendTo(大元素)

7、给元素添加属性值

attr(“属性名”，属性值)
removeAttr("class")//删除属性

8、对象属性操作

删除：delete  对象.属性
添加：直接添加就可以

9、寻找某元素的父元素

parent（）//只寻找父亲不找爷爷

10、删除某个元素

remove()

11、将某个元素中的内容置空

empty()

15、动态创建元素

    var hr =$(“<hr/>”);//在内存中创建元素，赋值给变量hr
     $(“#id”).append(hr);//将元素引入到页面
    或
     hr.appendTo($(“#id”));将元素hr追加到id中

16、遍历元素

      $.each(ks,function(i ,k){
		})
		//ks：数组名 function(i ,k)：回调函数  i：循环次数 k：将数组中的每一个元素为JS类型

17、添加事件

1、单击事件

       元素 . click(function(){    });

2、元素改变事件
```
       元素.change(function(){})
```