JQuery学习笔记
来源:互联网 发布:新闻稿发布软件 编辑:程序博客网 时间:2024/06/07 04:45
一、Jquery基本内容
1、JQuery是一个js框架(node.js angular.js bootstrap.js)
这个框架可以快速方便的操作html的css样式,修改html内容,查找html元素
2、为什么要使用JQuery:
1.JQuery兼容大部分的浏览器
2.JQuery代码比较简洁
3.JQuery应用非常广泛
JQuery2.0版本之后不再兼容ie6,7,8
3、如何使用JQuery:
1.需要导入Jquery-3.1.1.js文件到项目
2.需要在要使用Jquery-3.1.1.js的页面中引入该js文件
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
4、如何获取JQuery对象(掌握)
var $u=$("#username");//获取id为username的所有元素alert($u.val());//获取u的value值var $d=$("#div");alert($d.html());//获取d的innerHtml
5、js和JQuery的互相转换:(掌握)
//js对象和JQuery对象的转换var u=document.getElementById("username");//这是一个js对象var $u=$(u);alert($u.val());
//Jquery对象转换成js对象var $u=$("#username");var u=$u.get(0);//注意:每个Jquery对象都是一个类数组
6、在Jquery中如何表示页面已经加载完毕?(掌握)
$(document).ready(function(){ alert("xxx");});//简写$(function(){ alert("xxx");})
7、该方法和window.onload方法之间的区别(了解)
在写了多个时,window.onload会把前面的内容覆盖掉,而
(document).ready不会覆盖原因在于: (document).ready内部有一个栈队,会依次执行队列里面的每个$(document).ready
二、选择器
1、基本选择器:(掌握)
#id id选择器:通过id值获得元素
//选择id为one的元素 $("#btn").click(function(){ $("#one").css("background-color","red"); })
element 标签选择器:通过标签名获得元素
//选择标签元素名是div的 $("#btn3").click(function(){ $("div").css("background-color","red"); })
.class 类选择器:通过class值获得元素
//选择class为mini的元素 $("#btn2").click(function(){ $(".mini").css("background-color","red"); })
* :所有元素
//选择所有元素 $("#btn4").click(function(){ $("*").css("background-color","red"); })
多选择器:将多个选择器的结果添加一个数组中
//选择所有的span和id为two的元素 $("#btn5").click(function(){ $("span,#two").css("background-color","red"); })
2、层次选择器
A B–>获得A元素内部所有的B元素(爷孙)
//选择 body内的所有div元素$("#btn1").click(function(){ $("body div").css("background-color","red");})
A > B ,获得A元素内部所有的子元素B(父子)
//在body内,选择子元素div的$("#btn2").click(function(){ $("body>div").css("background-color","red");});
A + B ,获得A元素后面的第一个兄弟元素B(兄弟)
//选择 id为one 的下一个div元素.$("#btn3").click(function(){ $("#one+div").css("background-color","red");});
A ~ B ,获得A元素后面的所有兄弟元素(兄弟)
//选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>$("#btn4").click(function(){ $("#two~div").css("background-color","red");});
A.siblings(“div”) A的所有div兄弟
//选择 id为two的元素的所有div兄弟元素." id="btn5"/>$("#btn5").click(function(){ $("#two").siblings("div").css("background-color","red");});
3、基本过滤选择器:过滤选择器都是带冒号(掌握)
:first 第一个
//选择第一个div元素 $("#btn1").click(function(){ $("div:first").css("background-color","red"); });
:last 最后一个
//选择最后一个div元素 $("#btn2").click(function(){ $("div:last").css("background-color","red"); });
:eq(index) 获得指定索引
//选择索引eq值等于3的元素 $("#btn6").click(function(){ $("div:eq(3)").css("background-color","red"); });
:gt(index) 大于
//选择索引值大于3的元素 $("#btn7").click(function(){ $("div:gt(3)").css("background-color","red"); });
:lt(index) 小于
//选择索引值小于3的元素 $("#btn8").click(function(){ $("div:lt(3)").css("background-color","red"); });
:even 偶数,从 0 开始计数。例如:查找表格的1、3、5…行(即索引值0、2、4…)
:odd 奇数
//选择索引值为偶数 的div元素 $("#btn4").click(function(){ $("div:even").css("background-color","red"); });
:not(selector) 去除所有与给定选择器匹配的元素
//选择class不为one的 所有div元素 $("#btn3").click(function(){ $("div:not(.one)").css("background-color","red"); });
:header 获得所有标题元素。例如:
…
//选择所有的标题元素 $("#btn9").click(function(){ $(":header").css("background-color","red"); });
:animated 获得所有动画
//选择当前正在执行动画的所有元素 $("#btn10").click(function(){ $(":animated").css("background-color","red"); });
:focus 获得焦点
$("input[type='text']").focus(function(){ $(this).val("获得焦点"); }); $("input[type='text']").blur(function(){ $(this).val("失去焦点"); });
is(“条件”) 是否符合指定条件
$("input[type='text']").on("focus blur",function(){ if($(this).is(":focus")){ $(this).val("获得焦点"); }else{ $(this).val("失去焦点"); } });
4、内容过滤选择器:
:empty 当前元素是否为空 (是否有标签体–子元素、文本)
//选取不包含子元素(或者文本元素)的div空元素 $("#btn2").click(function(){ $("div:empty").css("background-color","red");});
:has(…) 当前元素是否有指定元素
//选取子孙元素含有class为mini元素的父div元素 $("#btn3").click(function(){ $("div:has(.mini)").css("background-color","red");});
:parent 当前元素是否是父元素(自己是否拥有子元素)
//选取含有子元素(或者文本元素)的div元素 $("#btn4").click(function(){ $("div:parent").css("background-color","red");});
:contains( text ) 标签体是否含有指定的文本
//选取含有文本“di”的div元素 $("#btn1").click(function(){ $("div:contains('di')").css("background-color","red");});
5、可见性过滤选择器:
:hidden 隐藏 特指 <xxx style="display:none;">
,获得 <input type="hidden">
//选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来$("#b2").click(function(){ $("div:hidden").show();});
:visible 可见(默认)
//选取所有可见的div元素$("#b1").click(function(){ $("div:visible").css("background-color","red");});
//Jquery中的遍历方式
//第一种遍历方式$("input:hidden").each(function(){ alert($(this).val());});
//第二种遍历方式$.each($("input:hidden"),function(idx,value){ alert($(this).val());});
6、属性选择器
[属性名] 获得指定的属性名的元素
//"选取含有 属性title 的div元素." id="btn1"/>$("#btn1").click(function(){ $("div[title]").css("background-color","red");});
[属性名=值] 获得属性名 等于 指定值得元素[1]
//"选取 属性title值等于“test”的div元素." id="btn2"/>$("#btn2").click(function(){ $("div[title='test']").css("background-color","red");});
[属性名!=值] 获得属性名 不等于 指定值的元素
//"选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/> $("#btn3").click(function(){ $("div[title!='test']").css("background-color","red");});
[as1][as2][as3]…. 复合选择器,多个条件同时成立。类似 where …and…and【2】
//"组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>$("#btn7").click(function(){ $("div[id][title*='es']").css("background-color","red");});
[属性名^=值] 获得属性值 开头的元素
//"选取 属性title值 以“te”开始 的div元素." id="btn4"/> $("#btn4").click(function(){ $("div[title^='te']").css("background-color","red");});
[属性名$=值] 获得属性值结尾的元素
//"选取 属性title值 以“est”结束 的div元素." id="btn5"/> $("#btn5").click(function(){ $("div[title$='est']").css("background-color","red");});
[属性名*=值] 获得含有属性值的元素
//"选取 属性title值 含有“es”的div元素." id="btn6"/> $("#btn6").click(function(){ $("div[title*='es']").css("background-color","red");});
7、子元素过滤选择器:
:nth-child(index) ,获得第几个孩子,从1开始。
//选取每个class为one的div父元素下的第2个子元素." id="btn1"/> $("#btn1").click(function(){ $("div.one :nth-child(2)").css("background-color","powderblue"); });
:first-child , 获得第一个孩子
//选取每个class为one的div父元素下的第一个子元素." id="btn2"/> $("#btn2").click(function(){ $("div.one :first-child").css("background-color","powderblue"); });
:last-child , 获得最后一个孩子
//选取每个class为one的div父元素下的最后一个子元素." id="btn3"/> $("#btn3").click(function(){ $("div.one :last-child").css("background-color","powderblue"); });
:only-child , 获得独生子
//如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/>$("#btn4").click(function(){ $("div.one :only-child").css("background-color","powderblue"); });
:first-child和:first的区别:
:first始终只会获取第一个符合条件的元素(只有一个)
:first-child:可能44获取到一堆符合条件的孩子
8、表单过滤选择器:
:input 所有的表单元素。(
<input> / <select> / <textarea> / <button>
):text 文本框
<input type="text">
:password 密码框
<input type=" password ">
:radio 单选
<input type="radio">
:checkbox 复选框
<input type="checkbox">
:submit 提交按钮
<input type="submit">
:image 图片按钮
<input type="image" src="">
:reset 重置按钮
<input type="reset">
:file 文件上传
<input type="file">
:hidden 隐藏域
<input type="hidden">
,还可以获得<xxx style="display:none">
:button 所有普通按钮
<button >
或<input type="button">
select 下拉列表 (没有:号)
textarea 多行文本框(没有:号)
9、表单对象属性过滤器:
:enabled 可用
//对表单内 可用input 赋值操作./ $("#btn1").click(function(){ $(":input:enabled").val("aaa"); });
:disabled 不可用。<xxx disabled="disabled">
或<xxx disabled=""> 或 <xxx disabled>
//对表单内 不可用input 赋值操作./ $("#btn2").click(function(){ $(":input:disabled").val("aaa"); });
:checked 选中(单选框radio,复选框 checkbox)
//获取多选框选中的个数./ $("#btn3").click(function(){ alert($(":checkbox:checked").length); });
:selected 选择(下拉列表 select option)
//获取下拉框选中的内容./ $("#btn4").click(function(){ $("select :selected").each(function(){ alert($(this).val()); }); });
三、 属性和CSS
属性【掌握】
attr(name) 获得指定属性名的值
$("div").attr("class"):
获取div中class的属性值
attr(key ,val) 给一个指定属性名设置值
$("div").attr("class",“myclass”):
给div设置myclass属性
removeAttr(name) 移除指定属性
$("div").removeAttr("class");
移除div设置class 属性值
Class类
addClass(“my”) 追加一个类
removeClass(“my”) 将指定类移除
toggleClass(“my”) 如果有my就移除,没有就添加
HTML代码/文本/值
val() 获得value的值(、、、)
val(text) 设置value的值
html() 获得html代码,含有标签
html(…) 设置html代码,如果有标签,将进行解析
text() 获得文本值,将标签进行过滤
text(…) 设置文本值,如果有标签将被转义 –>
< < & & > <
CSS Style值
css(name) 获得指定名称的css值
$("div").css("border")
;css(name ,value) 设置一对值
$("div").css("border","1px solid red")
;
css(prop) 设置一组值 $("div").css({"width":"100", "font-size":"30" })
;
CSS位置
offset() 获得坐标,返回JSON对象,{“top”:200, “left” : 100}
$(“div”).offset({top:100,left:100})offset(…) 设置坐标。例如:$(this).offset({“top”:0 , “left” : 0})
CSS尺寸
height() 获得 或 设置 高度 $(“div”).height(“100”)
width()获得 或 设置 宽度 (“div”).width(“100”)
四、文档操作
1、内部插入(插入到某元素的里面)
A.append(B) 将B插入到A的内部后面(之后的串联操作,操作A)
<A> .... <B></B> <A>
A.prepend(B) 将B插入到A的内部前面
<A> <B></B> ....<A>
2、外部插入(兄弟关系)
A.insertAfter(B) , 将A插入到B后面(同级)
<B></B><A></A>
A.insertBefore(B) 将A插入到B前面
<A></A><B></B>
3、删除操作:
empty() 清空标签体(清空文本节点和子节点)
remove() 删除当前对象。如果之后再使用,元素本身保留,绑定事件 或 绑定数据 都会被44移除
detach() 删除当前对象。如果之后再使用,元素本身保留,绑定事件 或 绑定数据 都保留
5、复制
clone(even) 克隆
even :指示事件处理函数是否会被复制。V1.5以上版本默认值是:false
6、替换
A.replaceWith(B) ,使用B将A替换掉
A.replaceAll(B) ,使用A替换B
7.包裹
A.wrap(B) ,使用B将每一个A进行包裹(多个B)
<B><A></A></B><B><A></A></B>
A.wrapAll(B) ,使用B将所有A进行包裹(一个B)
<B> <A></A> <A></A> </B>
A.wrapInner(B) ,使用B将每一个A的标签体包裹。
<A><B>。。。</B></A> <A><B>。。。</B></A>
A.unwrap() ,将A的父元素删除,自己留着
js本地存储
localStorge(永久性的保存数据,最大可以保存5M)
sessionStorge(不是永久性的保存数据)
$(":input[value='add']").click(function(){localStorage.setItem("key","这是内容");})$(":input[value='update']").click(function(){localStorage.setItem("key","这是新内容");})$(":input[value='show']").click(function(){alert(localStorage.getItem("key"));})$(":input[value='delete']").click(function(){localStorage.removeItem("key");})
- 【学习笔记】JQuery学习笔记
- jQuery 学习笔记 + jQuery-UI 学习笔记
- 【jQuery 学习笔记】初识jQuery
- jQuery 学习笔记------jQuery选择器
- jquery学习笔记----初识jquery
- jQuery学习笔记--jQuery Ajax
- jquery学习笔记
- jquery选择器学习笔记
- jQuery学习笔记
- 【jquery】学习笔记
- jQuery学习笔记
- jquery学习笔记
- jquery 学习笔记
- JQuery学习笔记
- Jquery学习笔记
- JQuery学习笔记
- jQuery学习笔记
- jquery学习笔记(二)
- 二分+暴力
- 项亮推荐系统实战读书笔记
- 第一周OJ-Q7解题方法
- JDK 1.8 ArrayBlockingQueue 源码阅读(一)插入
- Java大用处——Integer类常用的方法举例
- JQuery学习笔记
- aaa
- synchronized同步语句块
- 读《程序是怎样跑起来的》
- dbUtils工具
- Build Post Office II
- DevExpress.XtraGrid自定义列显示文本
- 数据库操作常用命令管理(Mysql)
- quartus prime工程中各种文件的后缀及意义