JQuery总结

影魅夜

于 2019-08-17 21:19:39 发布

阅读量352

点赞数

分类专栏： JQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/yangbiaosb/article/details/99698129

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery总结：是对JavaScript的封装，相比JavaScript而言，JQuery有更多的选择器，DOM操作更为简单，代码量更少，动画效果更加强大
版本分类：1.x:兼容ie678，功能不再增加，使用最多
2.x:不兼容ie678，功能不再增加
3.x:不兼容ie678，功能持续增加

JQuery中$的作用：$(function(){})加载页面，可以写多个，比window onload加载页面快
$(selector):有更强大的选择器功能

JQuery中的选择器;一.基本选择器
1.var zh1=$("#zh");
2.类选择器 var inp2=$(".inp");
3.元素选择器 var inp =$("input");

二.层级选择器
1.div下面的所有span元素 $("div span")
2.div下的直系span元素 $("div>span")
3.指定元素的紧接的元素 $("#sp2 + span")
4.指定元素后面所有同级的元素 $("#sp2 ~ span")

三.基本选择器
1.first:第一个元素
 $("ul li:first").css("background-color","red");
 $("ul li").first().css("background-color","red");
 2.last:最后一个元素
 $("ul li:last").css("background-color","red");
 3.odd:奇数元素索引下标从0开始
 $("ul li:odd").css("background-color","red");
 4.even:偶数元素索引下标从0开始
 $("ul li:even").css("background-color","red");
 5.eq:指定索引下标元素索引下标从0开始
 $("ul li:eq(3)").css("background-color","red");
 6.gt:大于指定索引下标元素
 $("ul li:gt(3)").css("background-color","red");

 7.lt:大于指定索引下标元素
 $("ul li:lt(3)").css("background-color","red");

 四.子元素选择器
 nth-child(2):每个父元素的第几个元素从1开始
 $("ul li:nth-child(2)").css("background-color","red");
 父元素的奇数子元素，从1开始
 $("ul li:nth-child(odd)").css("background-color","red");
 first-child:每个父元素的第一个元素
 $("ul li:first-child").css("background-color","red");
 last-child:每个父元素的最后一个元素
 $("ul li:last-child").css("background-color","red");
 父元素只有一个子元素
 $("ul li:only-child").css("background-color","red");

 五.属性选择器
 1.属性等于属性值
 $("input[type=text]").css("background-color","red");
 2.属性以什么开头
 $("input[name^=z]").css("background-color","red");
 3.属性以什么结尾
 $("input[name$=d]").css("background-color","red");
 4.属性包含什么
 $("input[name*=z]").css("background-color","red");
 5.多个属性
 $("input[type=text][name*=e]").css("background-color","red");

 六.表单选择器
 1.表单属性
 获取所有表单项
 var inp=$(":input").css("background-color","red");
 获取所有input元素
 var inp2=$("input").css("background-color","red");
 alert(inp.length);

 获取type属性为:text :password :radio :submit :image :checkbox :button :reset :file :hidden
 var tex=$(":text").css("background-color","red");

 2.表单元素属性：checked disable enable selected*/
 var che=$("input:checked"); //disable enable 和它写法一样
 alert(che.length);

 var sel=$("select option:selected");
 alert(sel.length);



 JQuery操作css样式：获得样式：div1.css("width");
 1.直接.css()给定样式属性，要改变的值适应于要改变的样式少
 div1.css("width","400px"); div1是对象名
 div1.css({'width':'400px','height':'400px'})改变多个样式：{key1:value1,key2:value....}---json数据格式：单引号双引号都行
 2.通过添加类的方式添加样式适应于要改变样式很多通过此方法如果和原有样式有相同样式考虑优先级
 div1.attr("class","div2"); div2是在style标签写的样式名
 div1.addClass("div2");

JQuery操作元素属性：获得属性：attr("type") 获得实时输入值inp.val();
操作元素属性attr("type","button"); 支持json格式inp.attr({'type':'button','value':'测试按钮'})

特例： var ch=$("#fav").attr("checked",);//返回checked
 var ch2=$("#fav").prop("checked",true);//选中了返回true

JQuery操作元素内容和值：
一：获得元素内容和值*/
 1.获得元素内容：html():会解析，获得标签
 var ht=$("#div1").html();
 console.log(ht);
 2.获得元素内容：text():不会解析，不获得标签，只获得纯文本内容
 var te=$("#div1").text();
 console.log(te);
 3.获得元素值：单标签 val()
 var v=$("#inp").val();
 alert(v);

 二：操作元素内容和值*/
 1.操作元素内容：html("值"):会解析
 $("#div1").html($("#div1").html()+"北京很美，生活很美");
 $("#div1").html("北京很美，生活很美");
 2.操作元素内容：textl("值"):会解析
 $("#div1").text($("#div1").text()+"北京很美，生活很美");
 3.操作元素值
 $("#inp").val($("#inp").val()+"美好")

JQuery操作元素节点：创建一个元素var p=$("北京双日游");
 1.添加元素节点
 添加子元素：在现有元素之后添加
 $("#div1").append(p);
 p.appendTo($("#div1"));

 添加子元素：在现有元素之前添加
 $("#div1").prepend(p);
 p.prependTo($("#div1"));

 添加平级元素:在现有元素之后添加
 p.insertAfter($("#div1"));
 $("#div1").after(p);

 添加平级元素：在现有元素之前
 p.insertBefore($("#div1"));
 $("#div1").before(p);

2.替换元素节点
 $("div p:nth-child(1)").replaceWith(p);
 p.replaceAll("div p:nth-child(3)");

3.删除元素节点
 删除指定元素：完全删除
 $("#div1").remove();
 $("div p:nth-child(5)").remove();

 清空指定元素：清空内容，不删结构
 $("#div1").empty();
 $("div p:nth-child(2)").empty();

 4.查找元素节点
 children():查找子元素$("div").children()
 parent():查找父元素$("p").parent()
 next():紧跟的同级元素 $("p").next()
 find():搜索指定元素 $("p").find("span")

JQuery中的事件：
 1.基础事件绑定
 $("#bu1").click(function(){
 alert("基础事件绑定");
 })
 2.bind事件绑定：可以绑定多个事件
 $("#bu2").bind({
 'click': function(){alert("基础事件绑定")},
 'dbclick':function(){alert("bind事件绑定")}
 })
 3.one事件绑定：只能作用一次
 $("#bu3").one('click',function(){
 alert("one事件绑定");
 })

 4.trigger事件：调用其他事件

 $("#bu4").click(function(){
 $("#bu1").trigger("click");

 })

 5.unbind事件：解绑事件
 $("#bu5").click(function(){
 $("#bu1").unbind("click");
 })

 6.live事件：在1.7版本之前，可以调用动态创建的标签事件

JQuery中的动画：隐藏hide(3000)
显现show(3000)
隐藏的显现显示的隐藏toggle(3000)
渐入 fadeIn(3000)
渐出fadeOut(3000)
上滑slideUp(3000)
下滑slideDown(3000)


JQuery中匿名函数和闭包原理：
1.无参匿名函数：(函数执行必须得调用函数名)匿名函数是没有名字的函数，要想调用必须把整个函数括起来，再用函数执行符()来调用
 (function (){
 var a;
 alert(a);
 })()
 2.有参匿名函数
 (function (b){

 alert(b);
 })(10)

 3.挂载局部变量：匿名函数中的变量不可被其他变量访问，可以用window挂载，就可以调用

 /*(function (){

 var c=100;
 window.cc=c;

 })()
 function A(){
 alert(cc);
 }
 A();

 4.闭包原理：把函数里函数的局部变量挂载或者return，就可以被外部函数调用
 function B(){

 function C(){

 var d=20;
 return d;//window.dd=d;
 }
 var dd=C();
 alert(dd);
 }
 B();