查看项目中引入的jquery版本 jquery方法查询api

转载

mob6454cc6ff2b9 2023-08-30 13:28:45

文章标签 查看项目中引入的jquery版本 jQuery 选择器 css 文章分类 jQuery 前端开发

一、jQuery的基本使用

jQuery的都是方法

（一）、获取jQuery对象 ==> jQuery(选择器||dom节点，上下文对象) ==> $(css选择器|dom节点，上下文对象)

var $output = jQuery("#output");
或
var $output = $("#output");

1、上下文对象可以是css选择器、jQuery对象

2、jQuery对象只能用jQuery的方法

var $aa = $(".aa");
$aa.css("color","#58bc58") ==> 单个方法设置
$aa.css({color:"#58bc58",backgroundColor:"red"}) ==> 多个属性值设置加上大括号

3、jQuery对象的到的是类数组

（3.1）length 若 length为0，说明获取不到该jQuery对象

（3.2）jQuery 得到版本号，用于判断是否为jQuery对象

（3.3）[索引] 获取dom节点

（二）、dom节点与jQuery对象的转换

1、jQuery对象转成dom节点

方法：[索引] ==>把jQuery对象用[]括号，括起来。

2、dom节点转成jQuery对象

方法：jQuery(dom节点) ==> 再dom节点前加上jQuery||$

（三）、延迟代码执行 ==> jQuery(function($){})

二、jQuery选择器

（一）、基本选择器

ID选择器$(“#save”)
类选择器$(“.class”)
标签选择器$(“div”)
复合选择器 $(“div,span,p.myClass”)
属性选择器$(‘[id=box]’)

$(‘li[data-index]’):获取有data-index属性的所有元素
$(‘li[data-index!=10]’):data-index属性不等于10的元素,css目前未支持
$(‘li[data-index^=10]’):data-index属性以10开头的元素
$查看项目中引入的jquery版本 jquery方法查询api_选择器$ =10]’):data-index属性以10结尾的元素
$(‘li[data-index*=10]’):data-index属性包含10的元素

（二）、表单选择器

1、:input ==> 匹配所有input

2、:text ==> 匹配所有的单行文本框

3、:radio ==> 匹配所有单选按钮

4、:checkbox ==> 匹配所有复选按钮

// var checkbox = $(":checked");

5、:selected ==> 获取已选择的option元素

// var $seloption = $(":selected");

6、:checked ==> 匹配所有被选中的元素(复选框、单选框等,option选项)

7、:submit ==> 匹配所有提交按钮

8、:reset ==> 匹配所有重置按钮

9、:password ==> 匹配所有密码框

10、:button ==> 匹配所有按钮

（三）、可见性

1、:hidden ==> 匹配所有不可见元素(display:none)，或者type为hidden的元素

var hidden = $("#output :hidden");

1、:visible ==> 匹配所有可见元素

以上两个选择器配合is()方法通常用于判断，返回布尔值
if(box.is(':visible')){ box.css('display','none'); }

（四）、筛选选择器

1、:odd/:even,:gt(n)/:lt(n) 筛选范围（索引支持负数）

备注：奇数|偶数|大于|小于
$("#output li:lt(2)").css('background-color','red');

2、:contains(奥巴马) 筛选出包含“奥巴马”这三个字的元素

$("#output li a:contains(嘻嘻嘻)").css('background-color','red');

（五）、筛选方法

1、first()/last(): 获取集合中第一个/最后一个元素

2、eq(index|-index): 获取第N个元素,n支持负数（表示从后面查找）

3、filter(选择器|jq对象|dom节点) 缩小匹配范围，将被匹配到的jq对象进行过滤，得到过滤后的jq对象。

4、not(选择器|jq对象|dom节点) 缩小匹配范围，将被匹配到的jq对象进行过滤,除去过滤后的jq对象。

5、has(选择器|dom节点) 将匹配到的jq对象进行过滤，匹配到有这个儿子的jq对象

<ul id="output">
	<li>哈哈哈</li>
	<li >哈哈哈<a href="#" class="aa">嘻嘻嘻</a></li>
	<li>哈哈哈</li>
	<li>哈哈哈</li>
</ul>
$("#output li").has(".aa").css('background-color','red');

三、元素关系方法

（一）、查找子元素

1、find(expr|obj|ele): 查找后代元素

2、children([expr]): 取得匹配元素的所有子元素。

var $baba = $(".baba");
var $erzia = $baba.children("a");

（二）、查找父级元素

1、parent([expr]): 获取父元素

var $baba = $(".baba");
var $yeye = $baba.parent();

2、parents([expr]): 取得所有父级元素

var $baba = $(".baba");
var $allparents = $baba.parents();

3、closest(expr|obj|ele): 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

<div>
	<a href="#">
		<span>胫腓骨就分开过</span>
	</a>
</div>
var $span = $("span");
$span.closest("div");

4、offsetParent(): 返回第一个有定位属性(absolute,relative,fixed)* 的父元素,如果没有定位父级，则返回html元素

（三）、查找兄弟元素

1、next([expr]): 返回下一个同辈元素 ==> nextElementSibling

2、prev([expr]): 获取前一个同辈元素 ==> previousElementSibling

var $erzia = $baba.children("a");
$erzia.prev()

四、jQ对象节点的增删改

（一）、创建jq节点 ==> $(" ")

$("<div/>") ==> 只创建节点
var $dv = $("<div>啊哈哈哈</div>"); ==> 内容与节点一起创建

（二）、元素添加

1、往父元素内部追加

（1）、父元素.append(content|obj|ele|fn): 给父元素添加最后一个子元素

备注：content|obj|ele|fn == 内容|jq对象|元素|函数
例如：在body插入最后一个元素
$("body").append($dv);

（2）、父元素.prepend: 给父元素添加第一个子元素

例如：在body插入第一个元素
$("body").prepend($dv);

（3）、appendTo(父元素)

备注：等同于append，不过直接链接起来
$("<div>啊哈哈哈</div>").appendTo($("body"));

（4）、prependTo(父元素)

2、外部插入内容（添加为兄弟元素）

（1）、after: 在元素后面插入内容

（2）、before: 在元素前面插入内容

var $h2 = $("<h2>嘻嘻嘻</h2>");
$("p").before($h2);

（3）、insertAfter(兄弟元素),

（4）、insertBefore(兄弟元素)

$("<h2>嘻嘻嘻</h2>").insertBefore($("p"));

（三）元素删除

1、remove() 删除元素

2、empty() 清空内容

var $p = $('<p>蛤蛤蛤</p>');
$("body").append($p);
//删除元素
$("p").remove();
//清空内容
$("p").empty();

（四）元素复制

1、 clone([Event[,deepEvent]])

备注：
1、Event：（true 或 false）是否复制元素的行为，默认为false
2、deepEvent: （true 或 false）是否复制子元素的行为，默认为Event的值
例如：
var $p = $("p");
	$p.on("click",function(){
	console.log(666);
})
$p.clone(true).insertAfter($p);

五.jQuery动画

（一）基本动画

1、显示隐藏：show()/hide()

（1）、hide(duration/时间)通过改变元素的高度、宽度、和不透明度，直到这三个属性值到0

（2）、show(duration/时间)通过改变元素的高度、宽度、和不透明度，直至内容完全可见

2、滑动（通过改变高度）

（1）、slideDown(duration/速度,fn/回调函数)

显示元素
不断改变高度，直到样式内设定的值

（2）、slideUp(duration/速度,fn/回调函数)

不断改变高度，直到0
隐藏元素

（3）、slideToggle(duration/速度,fn/回调函数) 改变元素的高度

当元素隐藏时调用slideDown()，当元素显示时调用slideUp()

3、淡入淡出（通过改变不透明度）

（1）、fadeIn: ==> 显示

显示元素
不断改变透明度直到1

（2）、fadeOut: ==> 隐藏

不断改变透明度直到0
隐藏元素

（3）、fadeToggle([speed,callback])

（4）、fadeTo([[speed],opacity,[fn]]) 不断改变透明度opacity，直到设定的值，并在动画完成后可选地触发一个回调函数。

（二）自定义动画

1、animate (params/参数,[speed]/时间,[fn]/函数)

$("#btn").on("click",function(){
$("img").animate({width:0},1000,function(){
	 $("img").css("width","220px");
	});
})

2、 :animated

获取正在执行动画的元素，一般与is()方法配合使用，用于判断元素是否处于动画状态

（三）动画队列

1、一个元素上的动画：

当animate中存在多个属性时，动画同时发生
当同一个元素链式调用animate时，动画是按顺序发生(队列)

2、不同元素上的动画：

默认情况下，动画同时发生
回调函数内的动画等到当前动画执行完后才接着执行

3、stop([clearQueue],[jumpToEnd])

不加参数时：停止当前元素所有《正在运行》的动画。
clearQueue:值为true时，清除队列
jumpToEnd:值为true时，跳到当前动画的最后一帧

4、delay(duration) ==> 延迟动画

设置一个延时来推迟执行队列中之后的动画。

duration:延迟的时间

六、事件

（一）常用事件方法

1、鼠标事件

click([[data],fn]) //点击时触发 click = mousedown + mouseup
dblclick([[data],fn]) //双击事件 dblclick = 2*click
mousedown([[data],fn])
mouseup([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseenter([[data],fn]) //事件不会冒泡
mouseleave([[data],fn]) ) //事件不会冒泡

2、键盘事件

keydown([[data],fn]) //键盘按下时触发
keypress([[data],fn])//字符按键
keyup([[data],fn]) //键盘弹起时触发

3、表单事件

blur([[data],fn]) //失去焦点时触发
focus([[data],fn]) //获得焦点
change([[data],fn]) //值改变并失去焦点时触发
submit([[data],fn])

4、其他事件

resize([[data],fn]) //元素大小改变时触发
scroll([[data],fn]) //滚动时触发

（二）jquery事件绑定与移除

1、事件绑定 ==> on(type,[selector /选择器],fn)

selector: 把本来绑定给selector的事件委托给它的父级.(fn的this指向被执行的selector)
可以给同一元素绑定多个同一事件
事件命名空间（对事件加以细分）
格式：事件类型.自定名字

$("#output").on("click.bz",".aa",function(){
            console.log(this);
})

支持自定义事件的绑定

备注：定义后需要用触发事件才能触发
$(ele).on('laowang',function(){})

触发事件：$(ele).trigger(‘laowang’);存在事件冒泡
触发事件：triggerHandler(type): 不会执行浏览器默认行为，也不会产生事件冒泡

$("body").on("lemon",function(){
	console.log('body');
})    
$("#output").on("lemon",function(){
	console.log(888);
 })    
$("#output").trigger("lemon");

2、清除绑定事件 ==> off()

off(‘click’); ==> 清除当前元素所有该类型的事件

$("#output").off("click.xw");

off(); ==> 没有参数，清除当前元素所有事件
off(‘click mouseover’) 一次性清除多个事件，事件之间以空格隔开
off(‘click.output’) 清除命名空间事件

3、其他事件方法

（1）、hover(enter[,leave])

enter:鼠标移入时执行
leave:鼠标移出时执行

hover方法内部使用mouseenter + mouseleave来实现效果

trigger(type): 手动触发事件（即使事件没有发生，也能执行事件处理函数）
triggerHandler(type): 这个方法会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认行为，也不会产生事件冒泡
阻止浏览器默认行为
event.preventDefault();
阻止事件传播
event.stopPropagation();
两者一起阻止：
return false;

七、jQuery的ajax方法

$.ajax(settings)

type:请求类型，默认GET
url:数据请求地址（API地址）
data:发送到服务器的数据对象，格式：{Key:value}。
success:请求成功时回调函数。
dataType:设定返回数据的格式，json, jsonp, text(默认), html, xml, script
async：是否为异步请求，默认true

$.get(url,[data],[fn],[dataType]) // type:’get’
$.post(url,[data],[fn],[dataType]) // type:’post’
$.getJSON(url,[data],[fn]) // type:’get’, dataType:’json’
$.getScript(url,[callback]) // type:’get’, dataType:’script’
load(url,[data],[callback]) 载入远程 HTML 文件代码并插入页面中。

$.ajax({
	type: "get",
	url: "http://wthrcdn.etouch.cn/weather_mini?city=广州",
	success : function(res){
		console.log(res);
	}
})

八、盒模型属性

.offset():获取匹配元素相对于根元素的偏移量
返回一个对象，包含当前元素的top,left值

$output.offset()

position():获取匹配元素相对(有定位属性)父元素的偏移量，如果没有定位父级，则相对于根元素(html)，返回一个对象，包含当前元素的top,left值。
width(v) = width; //取值/赋值,当传入v时，相当于css(‘width’,v);

var $output = $("#output");
 $output.width()

innerWidth() = width + padding; <==> clientWidth

var $output = $("#output");
$output.outerWidth()

outerWidth() = width + padding + border; <==> offsetWidth
outerWidth(true) = width + padding + border + margin;

$output.outerWidth(true)

九、常用jQuery原型对象的方法

jquery大部分方法的共性：

无参数时为取值，带参数时为赋值
取值：取得第一个匹配元素的值
赋值：设置所有匹配元素的值
隐式迭代（隐式遍历）：看不见的遍历，大部分的jquery方法都支持隐式迭代
设置方法：返回值为this，当前的实例对象
获取方法：返回值为获取到的值

写在jQuery原型对象中的方法，通过jQuery实例调用

css(attr[,val]): 获取/改变元素style属性（内联样式）

取值：css(attr),css([‘color’,’text-align’]) <==> getComputedStyle[attr]
赋值：css(attr,val),css({attr:val});

val(v): 获取/设置匹配表单元素的值（等同于原生js中的value属性）

取值： input.val()
赋值： input.val(v)

v:字符串
v:数组（一般用于单选/复选框的勾选）
v:函数function(idx,val){ return 值}//函数内部一定要返回值

html(): （等同于原生js中的innerHTML）
取值div.html()：取得第一个匹配元素的html内容
赋值div.html(‘:’)：设置匹配元素的内容
text(): 取得所有匹配元素的文本内容。

例如：
 $("#output").text("<div>都快放假的路口附近</div>");

addClass()/removeClass(): 添加/删除类,支持多个类同时添加或删除

toggleClass(): 如果存在（不存在）就删除（添加）类。
hasClass(‘con’): 判断当前元素是否包含con这个类，返回布尔值（不支持多个类进行判断）

eq(n) 获取第N个jquery对象（元素）,n支持负数（表示从后面查找）
index():获取当前元素在同辈元素中的索引值

$(this).index();

显示/隐藏
show()：显示元素
hide()：隐藏元素

带参数：同时改变width,height,opacity的动画

is(expr|obj|ele|fn) 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，其中如果有一个元素符合这个给定的选择器表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。
attr(name[,val]) 设置/获取html标签属性
prop(attr[,val]) 获取/设置DOM节点属性（一般修改布尔类型属性）

获取：获取在匹配的元素集中的第一个元素的属性值。
赋值：给集合中所有元素属性赋值

val为函数

$(':checkbox').prop('checked',function(idx,oldVal){
    return !oldVal;
}

each(function(idx,ele){}) //用于遍历jquery对象

return true;// 跳过当前循环，进入下一个循环（等效原生js中得continue）
return false;// 退出整个each循环（等效原生js中得break）

十、常用jQuery静态方法

$.each(arr|obj,callback)：通用遍历方法，用于遍历对象和数组。

callback(idx,item)

$.map(arr|obj,callback)：根据现有数组生成一个新的数组，新数组的元素为callback内return的值

callback(item,idx)

$.type(n)：检测参数n的数据类型
$.makeArray(obj) //将类数组对象转换为数组。
$.parseJSON(json) //接受一个JSON字符串，返回解析后的对象。类似原生js中的JSON.parse
$.inArray(value,array,[fromIndex]) //确定value在数组array中的位置，从0开始计数(如果没有找到则返回 -1 )，一般用于判断数组中是否包含某一字符。
serialize()/serializeArray() : 只能在form表单中使用，并且表单元素必须有name属性

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：soa服务化架构 soa架构微服务架构

下一篇：JAVAAPI结构 java api documentation

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯