jQuery

最新推荐文章于 2021-05-27 14:32:40 发布

混名汪小星

最新推荐文章于 2021-05-27 14:32:40 发布

阅读量250

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/qq_28835447/article/details/97181279

Jquery 专栏收录该内容

2 篇文章

订阅专栏

概念

1.什么是jquery?
jQuery其实就是一堆的js函数(js库)
容错机制能不报错就不报错

2.为什么要用jquery
简化javascript开发
兼容性强

3.jquery使用精髓
选择元素
== 循环操作==
== 链式调用==

用法

引入jQuery工具库
cdn：http://www.jq22.com/cdn/#a2
下载地址：http://www.jq22.com/jquery-info122

CDN引入

<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

本地引入html

 <script src="jquery-1.11.3.js"></script>

官方地址（下载 api查询等）:
中文： https://www.jquery123.com/
英文原版： https://jquery.com/

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
$定义为jquery对象

实例

$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有 < p> 元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的 < p > 元素
$("#test").hide() - 隐藏所有 id=“test” 的元素

jquery对象与DOM对象的区别
dom对象用dom的方法，调用返回为DOM对象
jquery对象用jquery对象的方法，返回JQuery对象

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。
jQuery 防止页面阻塞的入口函数:有3种写法
写法1

<script type="text/javascript">
        $(document).ready(function () {    //文档加载完成
           $("p").hide()
        })
</script>

写法2

<script type="text/javascript">
        $(function () {       //文档加载完成
           $("p").hide()
        })
</script>

写法3

<script type="text/javascript">
        $(window).ready(function () {  //文档和src加载完成
             $("p").hide() 
        })
</script>

jQueryDOM操作的相关方法

eq(index|-index) 一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
负数，从集合中的最后一个元素开始倒数。

实例

htnl代码

 <p> This is just a test.</p> <p> So is this</p>

jQuery 代码:

      $("p").eq(-2)

结果:

[ <p> This is just a test.</p> ]

get([index]) 取得所有匹配的 DOM 元素集合。取得第 index 个位置上的元素，可以将jQuery对象转换为DOM对象
get() 取得所有匹配的 DOM 元素集合。

HTML 代码:

<img src="test1.jpg"/> <img src="test2.jpg"/>jQuery 代码:

$(“img”).get(0);结果:

[ <img src="test1.jpg"/> ]

filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。用逗号分隔多个表达式

HTML 代码:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码:

$("p").filter(".selected, :first")

结果:

		[ <p>Hello</p>, <p class="selected">And Again</p> ]

find(“li”) 方法返回被选元素的后代元素。后代中的li节点被选中

not(expr|ele|fn) 删除与指定表达式匹配的元素
例子：

$("p").not( $("#selected")[0] )  //从p元素中删除带有 select 的ID的元素

has(selector) 选中元素中含有的‘selector’字符串值，包含匹配元素的选择器表达式。

$('li').has('ul').css('background-color', 'red');//给含有ul的li加上背景色

add（） $ (“div”).add($(“p”)) 相当于 div和p

end() 返回到父级jQery对象

取赋值相关方法


html()	设置或返回被选元素的内容（innerHTML）。html片段
text()	设置或返回被选元素的文本内容
addClass()	为每个匹配的元素添加指定的类名。
removeClass（）	删除类名
hasClass（）	判断是否含有此类名
val()	针对的是表单元素的value属性值，如果多选，将返回一个数组，其包含所选的值。(用在没有value属性的标签上面，是往这个jquery对象上面去赋值，在type = text 的时候，会有些异同，但不影响正常使用)

.attr() (基于setAttribue getAttribute)设置每一个匹配元素的一个或多个属性
对于HTML元素自己自定义的DOM属性，在处理时，使用attr方法
例子

$("img").attr("src");
$("img").attr({ src: "test.jpg", alt: "Test Image" });

**prop（）**设置每一个匹配元素的一个或多个属性。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法

prop('checked',true)  //复选框默认选中

toggleClass() 如果存在（不存在）就删除（添加）一个类。

基于jQuery对象查改删增相关方法


prev()	上一个兄弟元素节点
prevAll()	查找当前元素之前所有的同辈元素
nextAll()	查找当前元素之后所有的同辈元素
prevUntil(x[，y])	查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止 x表示到哪个节点结束且不包括该节点，y表示被选中的元素
.nextUntil(x[，y])	查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止 x表示到哪个节点结束且不包括该节点，y表示被选中的元素
siblings()	同级的所有的元素，除了自身 ,添加参数进行筛选
parent()	元素的唯一父元素的元素集合
parents()	所有匹配元素的祖先元素的元素集合（不包含根元素）
closest("")	精确的查找父级，必须传递参数，就近原则
.offsetParent()	找到距离最近的有定位的父级
slice()	与原来的slice方法类似
$ (“a”).insertAfter($(“b”)	将a节点插入在b节点的后面
insertBefore(content)	匹配的元素插入到另一个、指定的元素元素集合的前面。
append()	向每个匹配的元素内部追加内容
prepend()	向每个匹配的元素内部前置内容
$ (“a”).before($(“b”))	将b节点插入在a节点的后面
after()	在每个匹配的元素之后插入内容
appendTo()	颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
prependTo()	颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中
remove()	从DOM中删除所有匹配的元素。其他的比如绑定的事件，附加的数据等都会被移除
detach()	这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素 , 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
empty()	把所有段落的子元素（包括文本节点）删除
wrap()	$(“p”).wrap("< div>< /div>") 给每个P元素包裹一个div元素
wrapInner()	$(“p”).wrapInner(" < b > < /b>") 在每个p元素的内容上包装一个b元素
wrapAll( )	$(“p”).wrapAll("< div>< /div>") 给所有p元素包装一个div元素 (慎用容易结构变得混乱)
unwrap( )	$(“p”).unwrap() 移除每个p元素的父元素

clone() 克隆，复制包含子节点、文本和属性 ,参数为 true时将元素的事件也会复制
例子将克隆的p元素添加到body中

$ ("body").append($("p").clone())

事件绑定

on() 方法在被选元素及子元素上添加一个或多个事件处理程序

参数
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序
on(event,childSelector,data,function)
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数
event 绑定事件

one() 事件执行一次

例子

<a href="http://www.baidu.com">跳一个</a>
$("a").one('click',function(){   //事件执行一次，网站上的广告
			window.open('http://www.taobao.com');
			return false;  //行为  冒泡
		})

off（）在选择元素上移除一个或多个事件的事件处理函数。

off(event[,selector],[function(eventObj)][,map])

trigger() 自己去执行事件

例子

$('.demo').on('click',function(e,a,b,c){
			console.log(123)
			console.log(a)
			console.log(b)
			console.log(c)
		})
		$(".demo").trigger('click',[10,20,30])

event.which 指示按了哪个键或按钮

return false; 阻止默认行为和冒泡

动画相关方法

参数：null 或（[duration], [easing], [callblack]）

hide() 元素已被显示，则隐藏该元素
show() 元素已被隐藏，则显示该元素
toggle() 元素已被隐藏，则显示该元素反之显示
fadeIn（）从隐藏到可见（褪色效果）
fadeOut() 从可见到隐藏（褪色效果）
fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换
slideDown（）以滑动方式显示隐藏
slideUp（）以滑动方式显示显示
slideToggle（）使用滑动效果，在显示和隐藏状态之间切换

参数：null或（duration, [opacity], easing, callblack）

fadeTo() 将被选元素的不透明度逐渐地改变为指定的值。opacity为fadeTo独有

animate() 执行 CSS 属性集的自定义动画
使用 “+=” 或 “-=” 来创建相对动画
例子

 	$(".demo")
				.animate({width:"+=200",height:"+=200",left:"+=200",top:"+=200"},1000,'easeInOutBounce')
					.delay(1000)
						.animate({width:"-=200",height:"-=200",left:"+=400",top:"-=200"},1000,'easeOutBounce')

finish() 停止全部动画，直接到达最后的目标点
stop() 停止当前运动，直接到达下一阶段
delay() 下一项的执行设置延迟
jQuery.fx.off = true 运动的开关

动画相关jQuery插件

插件名称：
jQuery Easing Plugin:
目的:
用于扩展jQuery动画过渡效果

链接地址：https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js
参考：https://www.cnblogs.com/interstellar/p/6562446.html

位置坐标图形大小相关方法

offset() 绑定元素上边框相对于html上边界的偏移量。两个属性（以像素为单位的 top 和 left 位置）
offset().top绑定元素上边框始终是相对于html ，offsetTop是原生JS的方法，它获取的是你绑定元素上边框相对离自己最近且position属性为非static的祖先元素的偏移量

position() 匹配元素的位置（相对于它的父元素）两个属性（以像素为单位的 top 和 left 位置）

遍历索引相关方法

each() 遍历数组或对象
写法：
each(function(index,element)) $.each( object, callback )

参数
index - 选择器的 index 位置
element - 当前的元素（也可使用 “this” 选择器）
index - 选择器的 index 位置
element - 当前的元素（也可使用 “this” 选择器）

children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合， expr 用以过滤子元素的表达式
例子在每个div中查找 .selected 的类。children()只考虑子元素而不考虑所有后代元素

$("div").children(".selected")

index([selector|element]) 搜索匹配的元素，并返回相应元素的索引值，从0开始计数

jquery工具方法

jQuery.makeArray( object ) 函数的返回值为Array类型，返回转换后的数组对象。

$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象
原生JSON.parse() JSON.stringify将JavaScript对象转为字符串对象
例子

var obj = jQuery.parseJSON('{"name":"John"}');
	alert( obj.name === "John" );

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
.map(callback(index,domElement))
callback(index,domElement) 对当前集合中的每个元素调用的函数对象。

$.type() 判断数据类型

$.proxy() 改变this指向

语法1：$ (selector).proxy(function,context)
语法2：$(selector).proxy(context,name)
function 要被调用的已有的函数。
context 函数所在的对象的名称。
name 已有的函数，其上下文将被改变（应该是 context 对象的属性）。

浅克隆

$.extend() 插件扩展（工具方法）为jQuery类添加类方法，可以理解为添加静态方法。

实例1：

$.extend({
	min: function(a, b) { return a < b ? a : b; },
	
	max: function(a, b) { return a > b ? a : b; }

});

$.min(2,3);  //  2 
$.max(4,5);  //  5
实例2：
var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
$.extend(settings, options);
 
结果：
settings == { validate: true, limit: 5, name: "bar" }

深克隆

$ .fn.extend() 插件扩展（实例方法）对$.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”
实例：

$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick();