好文链接
1、jQuery是js的一个库,封装了js中常用的逻辑;
2、调用jQuery:
(1)、本地调用,在script标签的src属性里写上jQuery文件的地址。
(2)、使用CDN调用jQuery:
如:https://code.jquery.com/jquery-3.0.0.min.js
3、确认jQuery版本号的方法:
$:fn.jquery;或$().jquery;
4、jquery选择器:
标签名选择元素:$("a");
样式名选择元素:$(".title");
通过id名选择元素:$("#box");
CSS选择器在jquery里都适用;
5、jquery属性选择器:
$("[href]");选取所有带有href属性的元素。
$("[href='#']");选取所有href属性值等于#的元素。
$("[href!='#']");选取所有href属性值不等于#的元素。
$("[href$='.jpg']");选取所有href值以".jpg"结尾的元素。
6、jquery常用的过滤选择器:
:first 选择第一个元素
:last 选择最后一个元素
:even 选择偶数元素
:odd 选择奇数元素
:eq(index) 选择对应的下标元素
:gt(index) 选择下标大于指定下标的元素
:lt(index) 选择下标小于指定小标的元素
:not(selector) 选择不是此选择器的元素
jquery选择器可以以各种方式组合使用。
7、jquery中等页面加载完再读取script的方法:
$(document).ready(function(){...})或者$(function(){...});
8、jquery获取文档信息的方法:
text();获取或设置对象的文本信息;
html();获取或设置对象的子节点;
val();获取或设置表单对象的值;
9、jquery创建标签的方法:
$("<p></p>");还未添加在页面中
10、jquery添加节点的方法:
prepend();将指定节点添加到对象内部的开头;
append();将指定节点添加到对象内部的结尾;
after();将指定节点添加在对象外部的后面;
before();将指定节点添加在对象外部的前面;
prependTo();需添加的内容写在前面,括号内写上对象。
appendTo();同理
insertAfter();同理
insertBefore();同理
11、jquery删除节点的方法:
remove();删除节点;
empty();删除对象的子节点;使对象变空;
12、jquery样式操作:
addClass();添加样式
removeClass();删除class
hasClass();检测是否有指定的class样式
toggleClass();如果有指定的class样式就去除,如果没有,就添加上。
13、jquery属性操作:
attr();添加或返回指定的属性值。
removeAttr();删除指定的属性值。
14、jquery css操作:
$("p").css("font-size");获取p标签的字体大小;
$("p").css("font-size","16px");设置p标签的字体大小;
$("p").css({"font-size":"16px","background":"white"});设置多个样式
css操作函数
width();height();offset();返回或设置对象的宽度、高度、与x、y坐标(px)
15、jquery遍历操作:
向上遍历:
parent();代表对象的父亲。
parents();代表对象的所有祖父元素。
向下遍历:
find();获取对象的没一个子孙后代。
children();获取对象的直接子元素。
同级遍历:
siblings();获取对象的所有同辈元素。
next();获取对象的下一个同辈元素。
nextAll();获取对象的下边的所有同辈元素。
prev();获取对象的上一个同辈元素;
prevAll();获取对象上边的所有同辈元素。
16、jquery中的事件:
绑定事件:
直接绑定:$(selector).click(function(){...});
bind():$(selector).bind('click',function(){...});可绑定多个事件,不能帮定动态元素
live();$(selector).live('click',function(){...});事件绑定在document上,而不是元素,可绑定动态元素.
on();前面绑定方法的综合,兼容性强。在1.9版本之后整合了前三种方法.
移除事件:
unbing();对应bind();
die();对应live();
off();对应on();
鼠标事件:
mouseover/mouseenner:鼠标覆盖在对象上。 mouseenner比较常用
mouseout/mouseleave:鼠标离开对象。mouseleave比较常用
mousedown:鼠标的某个键被按下
mousemove:鼠标在对象上移动
mouseup:鼠标的按键被松开
click:单击鼠标
dblclick:双击鼠标
键盘事件:
keydown:键盘被按下
keypress:键盘按下并松开
keyup:键盘松开
表单事件:jquery表单事件中无reset事件
focusin/focus:表单获得焦点
focusout/blur:表单失去焦点
change:表单内容被改变
submit:表单被提交,加在form上
select:表单内容被选中,只对input、textarea有效
17、jquery特效
显示 隐藏 切换 效果
show(); hide(); toggle(); 直接显示或隐藏对象
fadeIn(); fadeOut(); fadeToggle(); 逐渐的显示或隐藏对象
slideDown(); slideUp(); slideToggle(); 滑动的显示或隐藏对象
18、jquery自定义动画:
关键词:animate
用法:
$("#btn").click(function(){
$("#box").animate("top",0)
$("#box").animate({"top":300,"left":200})
})
后面还可以跟上持续时间和回调函数。
19、动画停止:
stop("stopAll","GoToEnd")
stopAll:表示是否让动画全部停止,如果为false,即只停止当前动画
gotoend:表示是否让动画停止时立即完成,如果为false时,即不立即完成。
20、jquery-ajax
$.ajax({
type:"get",
url:"json3.json",
async:true,
data:{},向后台传输数据
dataType:"json",
success:suc,
error:function(){}
});
//解析后台数据
function suc(){
var sum="";
$.each(msg.function(i,v){//给获取到的每条后台数据加函数
console.log(i+"........."+v); i代表索引 v代表值
var str=var str="<li><img src="+v[1]+" alt='' /></li>";
sum+=str;
});
$(".c1 ul").html(sum);
};