当前位置 : 主页 > 编程语言 > 其它开发 >

JQuery总结

来源:互联网 收集:自由互联 发布时间:2022-06-29
JQuery一、选择器1.基本选择器 1)标签选择器: $("sel1") 2)id选择器: $("#sel1") 3)class选择器: $(".sel1") 4)通配选择器: $("*") 5)群组选择器: $("sel1,sel2") 6)特殊用法: $("div.box") 补充:
JQuery 一、选择器 1.基本选择器

1)标签选择器: $("sel1")

2)id选择器: $("#sel1")

3)class选择器:$(".sel1")

4)通配选择器:$("*")

5)群组选择器:$("sel1,sel2")

6)特殊用法:

$("div.box")

补充:

//设置单个css样式
$("选择器").css("属性","值");
//设置多个样式使用对象
$("选择器").css({
  background:"#ccc",
  color:"red"
});
2.层级选择器 1)包含选择器:sel1 sel2

​ sel1 下的所有子代(包括所有子孙代)

2)子类选择器:sel1>sel2

​ sel1下的子一代

3)相邻选择器:sel1+sel2

​ sel1紧挨着的兄弟元素sel2(选出一个)

4)兄弟选择器: sel1~sel2

​ sel1后所有sel2元素(不需要相邻,可以选出所有)

3.伪类选择器 (1)特定位置选择器

\1) :first:

\2) :last

\3) :eq(index) (索引从0开始)

(2)指定范围选择器

\1) :even (索引为偶数

\2) :odd (索引为奇数

\3) :gt(index)

\4) :lt(index)

(3)排除选择器

​ :not(选择器)

(4)匹配子元素的伪类选择器

与父元素相关。

1)E:first-child :

2):last-child

3)E:nth-child(index): ( nth 索引从1开始

​ A . :nth-child(even):

​ B . :nth-child(odd):

​ C . :nth-child(index)

​ D . :nth-child(2n):

​ E . :nth-child(2n+1):

4 ) :nth-last-child(index):

与父元素无关

5 )E :nth-of-type(index):(从前往后)

6 )E :nth-last-of-type(index): (从后向前)

7)E:hidden (选择出 所有display为none的元素

与父元素相关和与父元素无关

与父元素相关举例:

		<ul>
			<li>我是ul1</li>
			<li>我是ul2</li>
			<p>你好你好</p>
			<li>我是ul3</li>
			<li>我是ul4</li>
			<li>我是ul5</li>
			<p>你好你好</p>
		</ul>
<script>
//与父元素相关,获取不到"我是ul5"
$("ul li:nth-last-child(1)").css("background-color","blue");
//与父元素无关(nth-last-of-type),可以获取到"我是ul5"的li
$("ul li:nth-last-of-type(1)").css("background-color","blue");
</script>
4.内容选择器

1):contains('内容')

2):empty (元素内容为空,空格不算空)

3):has(“a”)

5.属性选择器

1)$(“元素[属性='属性值']”)

2)$(“元素[属性!='属性值']”)

3)$(“元素[属性^='属性值']”) (^ 以“...”开头

4)$(“元素[属性$='属性值']”) ($ 以“...”结尾

5)$(“元素[属性*='属性值']”) (包含"..."

6.表单选择器

(1):text (选择出type为“text”)

(2):password

(3):submit

(4):radio

(5):checkbox

(6):button

(7):reset

(8):image

(9):file

(10):checked

(11):disabled (被禁用的表单元素

(12):enabled (未被禁用的元素

(12):selected

区分$(“input”)和$(“:input”):

$(“input”)是一个元素选择器,只能匹配input标记;

$(“:input”)是一个伪类选择器,几乎可以匹配所有的表单元素

二、过滤器

过滤器不可以单独使用,必须跟在选择器的后面使用。

过滤器是对选择器查询出的结果进行第二次筛选。

1.$(选择器).过滤器

.first()

.last()

2.下标过滤器

.eq(index)

3.表达式过滤器

filter(expr)/(fn):筛选出与指定表达式/函数匹配的元素集合。

4.后代层次关系

(1).find("selecotr1") 查找所有子代

(2).children("selecotr1")

5.上一级层次关系

(1).parent()

(2).parents()

.parents(selector1)

(3).parentsUntil(selector1) 直到这个选择器,不包括这个选择器

6.兄弟关系

(1)下面的同级兄弟:

​ 1).next()

​ 2).nextAll()

​ 3).nextUntil() 后面所有兄弟,直到...

(2)上面的同级兄弟:

.prev()

.prevAll()

.prevUntil(selector)

(3) .siblings() 前后所有兄弟

7.单一过滤器

.map() 映射

.not(selector)过滤

.slice(a,b)截取(包头不包尾)

也可截取string与array;

.has()包含

8.判定过滤器

.hasClass(className)

.is(表达式)

.css(一个值):获取样式(内联,内部,外部,未设置的样式)

9.串联过滤器

1.add(selector),将selector指定的选择器对象添加到选择器范围中。该过滤器的功能也可以利用群组选择器实现。

2.end(),将一个带有过滤器结构的jQuery对象返回其对应的选择器对象。

10.操作属性

(1).attr()(不能操作内置属性,用于操作常规属性,id,class,src等)

.attr(属性):一个值表示获取

.attr(属性,属性值):两个值表示设置

.removeAttr("属性"):

(2)prop()用于操作内置属性(比如checked,innerHTML等)

.prop(属性)

.prop(属性,属性值)

.removeProp("属性")

(3).addClass()

添加多个class:(1)addClass(class1 class2 class3)

(4).removeClass():移除class

(5).toggleClass(class1): 切换

(6)

.html():表示获取jquery对象的内容;

.html(参数):设置jquery对象的内容,传递的参数了可以为字符串,也可以为标签,也可以为“”

(7)

.text():表示获取jquery对象的文本内容;

.text("文本"):设置jquery对象的文本内容,但是不会解析标签,只能原样输出标签,当成文本传递。

(8).val() 获取值(表单input的值)

三、操作DOM 1.创建节点

$("<h1></h1>")

2.插入节点

内部插入

a.append(b) 在a的内部添加b

a.appendTo(b) a添加到b内部后面

a.prepend(b) 在a内部的前面添加b

a.prependTo(b)

节点剪切

如果是选择的是已存在的节点则会将已存在的节点剪切到指定位置

外部插入

a.after(b) 在a的外部后面添加b

a.insertAfter(b) 将a插入到b外部的后面

a.before(b)

a.insertBrfore(b)

节点包裹

//外包
$("span").wrap("<p></p>")  //每个span外面,外包一个p标签
//总包
$("span").wrapAll("<p></p>")  //所有span外面,整个外包一个p标签
//内包
$("div").wrapInner("<p></p>")  //div内包一个p
//卸包
$("span").unwrap()         //可用于删除上一级父元素

删除节点

两种方法都可以删除节点,并返回被删除的JQuery对象
$("div").remove()             //删除选择的节点(会删除原有事件)   
$("div").detach()              //删除选择的节点(删除节点,但保留原有事件)
//清空节点(只清空节点内容,不删除节点)
$("div").empty()

节点克隆(复制节点)

传参和不传参的区别

$("选择器").clone()             //不传参数true,不复制事件
$("选择器").clone(true)             //复制节点,包括节点的事件

节点替换

js中标签替换

dom.outerHTML = "<p>我是被替换的标签</p>"

Jquery中节点替换

//指定元素替换成匹配元素
$("div").replaceWith("<p><p>")   //用p标签替换所有的div
//用匹配元素替换成指定元素
$("span").replaceAll("a")      //用span标签替换掉所有的a标签
四、JQuery动画 1.显隐动画

$("选择器").show(speed,fn) speed为速度(毫秒数),fn为回调函数

$("选择器").hide(speed,fn)

$("选择器").toggle(speed)

2.显隐滑动效果

.slideUp(speed,fn)

.slideDown(speed,fn)

.slideToggle(speed,fn)

3.淡入淡出效果

.fadeIn(speed,fn) 淡入

.fadeOut(speed,fn) 淡出

.fadeToggle(speed,fn)

fadeTo(speed,opaity,fn) 指定改变到某个透明度

注:由于fadeIn()和fadeOut()的边界是1和0,所以使用fadeTo()就无法使用fadeIn()或者fadeOut()

4.自定义动画

.animate({属性1:属性值1,属性2:属性值2},speed,linear,fn)

第三个参数linear为匀速,默认值为easy减速

有先后执行顺序的动画(三种方式)

(1)将后执行的动画写入回调函数fn

(2)链式调用: $("选择器").animate().animate()

(3)队列式调用:$("选择器").animate();$("选择器").animate();

让图片水平居中在容器内部

(1)

将盒子定位到容器中间

left:50%

top:50%

用margin拉回

margin-left:-50%

margin-top:盒子高的一半

(2)

第一张图片:display:inline-block

让图片水平居中:text-align:center

让图片垂直居中:vertical-align:middle

注:由于vertical-align是相对于某个元素垂直居中,所以要加空白盒子

height:100%;

vertical-align:middle;

display:inline-block;

无缝滚动实例

思路:

1.设置当前索引curIndex,和前一张索引prevIndex。(curIndex为下一次要显示的图片索引,prevIndex为现在看见的图片)

2.点击下一张按钮,图片向左移动;点击前一张按钮,图片向右移动

3.滑动前将要滑入的图片放指定位置,现在的照片prevIndex划走,要滑入的照片curIndex进入

style样式

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 800px;
				height: 550px;
				border: 1px solid #000;
				margin: 50px auto;
				position: relative;
				overflow: hidden;
			}

			li {
				list-style: none;
			}

			.imgList {
				width: 800px;
				height: 550px;
				position: relative;
				overflow: hidden;
			}

			.imgList li {
				position: absolute;
				left: 800px;
			}
			.box img {
				width: 800px;
				height: 550px;
				position: absolute;
				left: 800px;
			}
			.btn {
				font-size: 40px;
				color: #fff;
				width: 50px;
				height: 80px;
				box-shadow: 0 0 18px #fff;
				position: absolute;
				top: 230px;
				text-align: center;
				line-height: 80px;
				border-radius: 50%;
				cursor: pointer;
			}
			#prev {
				left: 50px;
			}
			#next {
				right: 50px;
			}
			.nav {
				height: 50px;
				text-align: center;
				position: absolute;
				width: 100%;
				bottom: 30px;
			}
			.nav li {
				display: inline-block;
				width: 30px;
				height: 30px;
				background: #ccc;
			}
			.nav .on {
				background: #333;
			}
		</style>

html主体部分

		<div class="box">
			<img style="left: 0px;" src="./img/images/show/9/1.jpg" />
			<img src="./img/images/show/9/2.jpg"/>
			<img src="./img/images/show/9/3.jpg" />
			<img src="./img/images/show/9/4.jpg" />
			<img src="./img/images/show/9/5.jpg" />
			<div id="prev" class="btn"><</div>
			<div id="next" class="btn">></div>
			<ul class="nav">
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

js部分(使用Jquery实现)

		<script src="js/jquery-1.11.3.js"></script>
		<script>
			var prevIndex = 0;
			var curIndex = 0;
			$("#next").click(function() {
				//.is(":animated"):正在执行动画返回true,没在执行动画返回false
				if ($(".box>img").eq(curIndex).is(":animated")) {
					return;
				}
				if (curIndex >= $(".box>img").length - 1) {
					curIndex = 0;
				} else {
					curIndex++
				}
				tab();
				prevIndex = curIndex;
			})
			$("#prev").click(function() {
				if ($(".box>img").eq(curIndex).is(":animated")) {
					return;
				}
				if (curIndex <= 0) {
					curIndex = $(".box>img").length - 1;
				} else {
					curIndex--;
				}
				tab();
				prevIndex = curIndex;
			})
			$(".nav li").click(function() {
				curIndex = $(this).index();
				if (curIndex == prevIndex) {
					return;
				}
				tab();
				prevIndex = curIndex;
			})
			//左边按钮:向右边滑动;
			function tab() {
				//切大图;
				if (curIndex == 0 && prevIndex == 4) {
					//边界2,当前在最后一张,点击next
					//向左滑动:前一张向左滑动,当前那一张摆放在右边,滑动到当前位置;
					$(".box>img").eq(prevIndex).animate({
						left: -800
					}, 1000)
					$(".box>img").eq(curIndex).css("left", "800px").animate({
						left: 0
					}, 1000)
				} else if (prevIndex == 0 && curIndex == 4  ) {
					//边界1,当前在第一张,点击prev
					//向右滑动:前一张向右滑动,当前那一张摆放在左边,滑动到当前位置
					$(".box>img").eq(prevIndex).animate({
						left: 800
					}, 1000)
					$(".box>img").eq(curIndex).css("left", "-800px").animate({
						left: 0
					}, 1000)
				} else if (curIndex > prevIndex) {
					$(".box>img").eq(prevIndex).animate({
						left: -800
					}, 1000)
					$(".box>img").eq(curIndex).css("left", "800px").animate({
						left: 0
					}, 1000)
				} else {
					$(".box>img").eq(prevIndex).animate({
						left: 800
					}, 1000)
					$(".box>img").eq(curIndex).css("left", "-800px").animate({
						left: 0
					}, 1000)
				}
				//切小点;
				$(".nav li").eq(curIndex).addClass("on").siblings().removeClass()
			}
		</script>
5.动画执行

清除动画计时器

.stop(true)

.stop(true,true) 传入两个值比传入一个值清除更快

判断是否正在运动

.is(":animated")

五、Event事件 一、定位与尺寸 1、获得jQuery对象的尺寸:

(1).css(“width”)获取width(带有px),和margin/padding/border无关。

(2).width()/.height():获取width(不带有px),和margin/padding/border无关。

Js:offsetWidth:获取的是width+border+padding(不带单位),与margin无关。

(3).innerWidth()/innerHeight()获取的是windth+padding(不带单位),与border与margin无关。

(4).outerWidth(true):获取width+padding+margin+border(不带单位)

.outerWidth(false):获取width+padding+border(不带单位)==js的offsetWidth

(1)区别$(document).width():大小取决于内容的大小

(2)与$(window).width():取决于window窗口的大小

2、获得jQuery对象的定位位置

(1)绝对定位:利用offset()方法获得的定位对象又具备两个属性:

.offset().left:永远相对于浏览器的位置,元素相对于document的left(不带)

(2)相对定位:jQuery对象使用position()方法获得相对定位对象。

取决于父元素写了position定位的父盒子。

.position().left

二、滚动事件:

scrollLeft():设置/获取水平滚动条滚走的左侧距离。

scrollTop():设置/获取垂直滚动条滚走的顶部距离。

不传值表示获取垂直滚动条滚走的顶部距离。

传值表示设置值。

三、Event事件: 1、Event属性:

type:获取事件类型名称

target:发生事件的节点

keyCode:只针对于keypress事件,获取键盘键数字 按下回车,13

2、鼠标位置

pageX:光标对于页面原点的水平坐标 body,document

pageY:光标对于页面原点的垂直坐标

clientX:光标对于浏览器窗口的水平坐标 浏览器

clientY:光标对于浏览器窗口的垂直坐标

screenX:光标对于电脑屏幕的水平坐标 电脑屏幕

screenY:光标对于电脑屏幕的垂直坐标

offsetX:鼠标相对于事件源的位置

offsetY:

3.阻止冒泡

stopPropagation()

4.阻止对象的默认行为

preventDefault()

5. 事件绑定 (1)on()bind()方法基本相同
$("btn").bind("click",function(){...})
//同一个元素写不同事件执行相同的方法
$("btn").bind("click mouseover mouseout",function(){...})
//同一个元素写不同事件执行不同的方法(写成对象的方式)
$("btn").bind({
  click:function(){...},
  mouseover:function(){...}
})

不同点:on(事件,selector,参数,fn),on存在事件委托

//h1将事件click委托给body,实际上仍然是“h1”操作
$("body").on("click","h1",function(){...})
(2)自定义事件

.bind("say",function(){...})

触发自定义事件

.trigger("say")

注:如果js有的事件,但是JQuery中没有,需要进行事件绑定使用,但是不需要触发。

(3)移除绑定事件

移除元素绑定的所有事件

.off()

.unbind()

移除特定事件

.unbind("click")

移除特定事件的特定方法fn

.unbind("click",fn)

(4)one(事件,fn)

该事件只执行一次。常用于请求后台数据时。

四、事件类型名:

1、鼠标事件:(7个)

click(鼠标单击左键)、dlbclick(鼠标双击左键)、mouseover(鼠标划入)、mouseout(鼠标划出)、mousemove(鼠标移动)、mouseenter(鼠标进入)、

mouseleave(鼠标移开)、mouseup(鼠标抬起)、mousedown(鼠标按下)。

Mouseenter与mouseover的区别:mouseenter只作用于本身,不会作用于子元素。

2、键盘事件:(3个)

keypress、keyup、keydown

3、表单元素事件:

表单事件:

(1).submit():form.submit()提交

.submit(fn):当提交时执行fn函数

(2)form.reset():重置 只针对dom元素

当重置时执行

$("form").bind("reset",function(){
  alert("确定重置吗")
})

表单元素事件:

.focus();获得焦点

.focus(fn):当获得焦点时执行

(1)blur():同focus

(2).focusin()

(3).focusout()

(4).change():当改变时执行;

(5).select():选中

.select():输入框里的值被全部选中

.select(fn):当输入框的值被选中时执行fn

(6)input():作用于所有form元素(要使用事件绑定)

4、浏览器事件:

resize():当浏览器的大小发生变化时触发该事件。

.scroll():当浏览器滚动条发生滚动时触发该事件。

5、其它事件:

.load():当页面加载后触发该事件,多用于JavaScript的window对象中。

.unload():当页面卸载(关闭页面)时触发该事件。

.Beforeunload():离开页面(更新网址,关闭网页)之前执行; .error():当图片加载失败时触发该事件。

6.释放JQuery

$.noConflict()

仅仅释放JQuery的$,JQuery仍然代表JQuery

可以指定新字符代表JQuery

var j = $.noConflict();    //j代表JQuery
六、JQuery异步操作(Ajax) 1.js中的Ajax

js中的Ajax

//1.创建对象
request = new XMLHTTPRequest();
//2.链接后台
request.open("GET","接口地址");
//3.发送
request.send();

//请求成功
request.onload=function(){
  data = request.responseText;   //返回的数据
  console.log(JSON.parse(data));
}
//请求失败
request.onerror=function(){
  
}
//请求状态改变
request.onreadystatechange=function(){
  
}

Promise

三种状态(状态不可逆

1.Pending(待定):初始状态,既没有被兑现也没有被拒绝

2.fulfilled(已兑现):操作成功完成

3.regected(已拒绝):操作失败

//成功执行then,失败执行catch
 			new Promise(function(resolve, reject) {
				var request = new XMLHttpRequest();
				request.open("GET","接口地址");
				request.send();
				request.onload = function() {
					//resolve提交到then
					resolve(request.responseText)
				}
				request.onerror = function() {
          //regect提交到catch
					reject("error");
				}
			}).then(function(res) {
				console.log(JSON.parse(res))
				var val = JSON.parse(res);
				console.log(val.data[1].icon);
			}).catch(function(rej) {
				console.log(rej)
			}) 
2.JQuery中的异步请求

链接网页

$("sel").load("head.html")
$.get()和$.post()

$.get()与$.post()使用方式相同

$.get()传参的三种方式

(1)url传参(问号分隔)

$.get("地址?type=1",function(res){...})

(2)字符串传参(多个值用&分隔)

$.get("地址","type=1",function(res){...})

(3)JSON传参

$.get("地址",{type:1},function(res){...})

$.ajax
$.ajax({
  type:"get",
  url:"地址",
  data:{type:"值"},
  success:function(res){
    //请求成功返回的数据
    console.log(res);
  },
  error:function(rej){
    console.log("error");
  }
})
不同页面间传递数据

1.浏览器存储传参

//存值
localStorage.setItem("myId","值");
//获取值
localStorage.getItem("myId");

2.url地址传参

地址栏中通过?分隔传参,传多个参数再用&分隔

window.location.search得到url中的参数

//获取地址栏中参数的值,name为参数的名字
GetQueryString: function(name) {
		//定义正则,用于获取相应参数
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		//字符串截取,获取匹配参数值
		var r = window.location.search.substr(1).match(reg);
		// console.log(r)
		//但会参数值
		if (r != null) return r[2];
		return null;
	}

拓展:url中的参数加密解密

加密:

u=encodeURIComponent("要加密的str");

解密:

decodeURIComponent(u)

上一篇:使用u盘安装centos7.2踩坑过程
下一篇:没有了
网友评论