jQuery基础整理

最新推荐文章于 2022-09-26 22:17:49 发布

橘子X汽水

最新推荐文章于 2022-09-26 22:17:49 发布

阅读量164

点赞数 2

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/MiracleBoyDyl/article/details/103419922

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

导入
导出
摘要添加摘要
保存
撤销
重做
目录
帮助 @TOC

jQuery语法

文档就绪事件：$(function(){ //代码... });与$(document).ready(function(){ //代码... });效果一样。

选择器

元素选择器: $(“p”)；
id选择器: $("#p")；
.class选择器: $(".p")；
所有元素选择器: $("*")；
选取当前Html: $(this)；
选取 class 为 intro 的 p 元素: $(“p.intro”)；
选取第一个 p 元素: $(“p:first”)；
选取第一个 ul 元素的第一个 li 元素 :$(“ul li:first”)；
选取所有 ul 元素的第一个 li 元素 :$(“ul li:first-child”)；
选取带有href属性的元素 :$("[href]")；
选取所有target属性值等于“_blank”的a元素 :$(“a[target=’_blank’]”)；
选取所有target属性值不等于“_blank”的a元素 :$(“a[target!=’_blank’]”)；
选取所有 type=“button” 的 input 元素和 button 元素:$(":button")；
选取偶数位置的tr元素：$(“tr:even”);
选取奇数位置的tr元素：$(“tr:odd”);

jQuery事件

鼠标事件

1.点击事件：click();
2.双击事件：dblclick();
3.鼠标穿过事件：mouseenter();
4.鼠标离开事件：mouseleave();
5.鼠标移动到元素并按下事件：mousedown();
6.鼠标松开事件：mouseup();
7.鼠标悬停事件：hover();

键盘事件

1.键盘按下事件：keypress()，不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）；
2.键盘按下事件：keydown()；
3.键盘放开事件：keyup()；

表单事件

1.表单提交事件：submit()；
2.表单元素值改变事件：change();
3.元素获得焦点：focus();
4.元素失去焦点：blur();
文档、窗口事件

1.元素加载事件：load();(1.8 中被废弃)
2.调整浏览器窗口大小时：resize();
3.当用户滚动指定的元素时，会发生 scroll 事件:scroll();
4.当发生以下情况下，会触发 unload 事件：
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器窗口
重新加载页面
(1.8 中被废弃，在 3.0 版本被移除。Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。) ；

jQuery效果

隐藏显示
1.隐藏：hide();
2.显示：show();
2.切换：toggle();
淡入淡出
1.淡入：fadeIn();
2.淡出：fadeOut();
3.切换：fadeToggle();
4.渐变为给定的不透明值：fadeTo(“slow”,0.4);
滑动效果
1.向下滑动：sildeDown();
2.向上活动：sildeUp();
3.切换：sildeToggle();
jQuery动画
1.动画：animate();
2.动画队列：逐一运行这些 animate 调用,

 $(function(){  
   var div=$("div"); 
   div.animeat({height:'300px',opacity:'0.4'},'slow');
   div.animate({width:'300px',opacity:'0.8'},"slow"); 
   div.animate({height:'100px',opacity:'0.4'},"slow"); 
   div.animate({width:'100px',opacity:'0.8'},"slow"); 
  });

停止动画
1.停止当前动画：stop();
2.停止队列的所有动画：stop(true);
callback
回调函数：$("p").hide("slow",function(){ alert("...."); })动画完成后执行alert；$("p").hide(); alert("...."); 动画完成前执行alert;

jQuery Html

jQuery DOM操作
1.设置或返回所选元素的文本内容：text();
2.设置或返回所选元素的内容（包括 HTML 标记）:html();
3.设置或返回表单字段的值:val();
4.获取属性：attr()，对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法;
5.获取属性：prop()，对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法，具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()；
添加元素
1.在被选元素的结尾插入内容：append();
2.在被选元素的开头插入内容：prepend();
3.在被选元素之后插入内容：after();
4.在被选元素之前插入内容：before();

jQuery遍历

祖先
1.parent(): 返回被选元素的直接父元素；
2.parents(): 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)；
3.parentsUntil: 介于两个给定元素之间的所有祖先元素，下面的例子返回介于 span 与 div 元素之间的所有祖先元素；

$(document).ready(function(){
  $("span").parentsUntil("div");
});

后代
1.children(): 返回被选元素的所有直接子元素；
2.find(): 返回被选元素的后代元素，一路向下直到最后一个后代。
同胞
1.siblings(): 返回被选元素的所有同辈元素；
2.next(): 返回被选元素的下一个同胞元素；
3.nextAll(): 返回被选元素下的所有同胞元素；
4.nextUntil(): 返回介于两个给定参数之间的所有跟随的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

5.prev(): 返回被选元素的上一个同胞元素；
6.prevAll(): 返回被选元素上面的所有同胞元素；
7.prevUntil(): 返回介于给定参数之间的所有同辈元素；
过滤
1.frist(): 返回被选元素的首个元素；
2.last(): 返回被选元素的最后一个元素；
3.eq(): 返回被选元素中带有指定索引号的元素；
4.filter(): 返回匹配给定标准的所有元素；
5.not(): 返回不匹配给定标准的所有元素；
jQuery Ajax
Ajax实现在不重新加载全部页面的情况下，对局部页面进行刷新的操作。
Ajax=异步 JavaScript 和 XML
1.load(): 从服务器加载数据，并把数据放到被选元素中；

$("#").load(Url,data,callback);

必需的 URL 参数规定，你希望加载的 URL。$("#div1").load("demo_test.txt");
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。$("#div1").load("demo_test.txt #p1");（把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的 div元素中）
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
– responseTxt - 包含调用成功时的结果内容
– statusTXT - 包含调用的状态
– xhr - 包含 XMLHttpRequest 对象
( load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息:)

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});