首页 / JQUERY / jQuery学习笔记
jQuery学习笔记
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery学习笔记,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3950字,纯文字阅读大概需要6分钟。
内容图文
![jQuery学习笔记](/upload/InfoBanner/zyjiaocheng/990/b0bb91562daf46f28e6a80bc59773794.jpg)
jQuery框架
* 由于JavaScript语言中的和页面相关的内容比较繁琐,jQuery的出现就是解决此问题,可以让程序员更高效的开发页面动态效果。
* 如何使用jQuery框架?
此框架就是一个外部的js文件,通过script标签的src属性引入到HTML页面即可使用
<!--引入入jQuery框架--> <script src="../js/jquery-1.4.2.js"></script> <script> //给按钮添加点击事件 /* //js动态绑定事件 let b1=document.getElementById("b1");//现在的谷歌浏览器等会自动添加这行代码,但是有的浏览器不会,所以为了兼容性还得写 b1.onclick=function () { alert("按钮被点击了"); }*/ //jQuery写法 //jquery中的事件的名称和js中的事件的名称比较,去掉了on $("#b1").click(function () { //alert("按钮被点击了!"); /*let a=document.getElementById("d1"); let b=document.getElementById("i1"); a.innerText=b.value;*/ //等效上面三行代码 $("#d1").text($("#i1").val()) //document.getElementById("i1"); 获取到的是js对象,表示文本框 //$("#i1")获取到的是jQuery对象,也表示文本框 }); </script>
* js对象和jQuery对象不是同一种对象,彼此的方法也不能互相调用
* js对象和jQuery对象的互相转换
* js转jQuery
let jq=$(js);
* jQuery转js
let js=jq[0];
<body> <input type="text" id="i1"> <input type="button" value="js转jq" id="b1"> <input type="button" value="jq转js" id="b2"> <!--引入jQuery框架--> <script src="../js/jquery-1.4.2.js"></script> <script> //先给按钮绑定单击事件 $("#b1").click(function () { //获取js对象 let js=document.getElementById("i1"); //js对象转为jQuery对象 let jq=$(js); //调用jq的方法val()验证是否转换成功 alert(jq.val()) }); $("#b2").click(function(){ //得到jq对象 let jq=$("#i1"); //把jq对象转成js对象,jq对象本质上是一个数组,里面装的是js //此时通过id选择器获取到的jq数组里面只有一个元素,就是jq[0] let js=jq[0]; alert(js.value); }); </script> </body>
$("选择器"),jQuery的这个通过选择器选择元素的写法可以理解成是一个方法,它返回的jQuery对象是一个数组,而这个jQuery对象里面装的就是js对象
jquery中的选择器
* 基础选择器 用法和css一样
标签名 $("div") id选择器 $("#id") class类选择器 $(".class") 分组选择器 $("div,#id,.class") 任意元素选择器$("*")* 层级选择器
$("div span") 匹配div里面的所有span 子孙后代选择器 $("div>span") 匹配div里面的子元素span 子元素选择器* 层级相关方法:
$("#abc").next("span") 匹配id为abc元素的弟弟元素 $("#abc").nextAll() 匹配id为abc元素的弟弟们元素 $("#abc").prev() 匹配id为abc元素的哥哥元素 $("#abc").prevAll() 匹配id为abc元素的哥哥们元素 $("#abc").siblings() 匹配id为abc元素的所有兄弟元素 $("#abc").parent() 匹配id为abc元素的父元素 $("#abc").children() 匹配id为abc元素的子元素们* 过滤选择器
$("div:first") 匹配所有div中的第一个div $("div:last") 匹配所有div中的最后一个 $("div:eq(n)") 匹配下标为n的div n从0开始 $("div:lt(n)") 匹配下标小于n的div n从0开始 $("div:gt(n)") 匹配下标大于n的div n从0开始 $("div:not(.abc)") 匹配class值不是abc的div $("div:even") 匹配下标为偶数的div $("div:odd") 匹配下标为奇数的div* 内容选择器
$("div:has(p)")匹配包含p子元素的div $("div:empty") 匹配空的div $("div:parent") 匹配非空的div $("div:contains('xxx')") 匹配包含xxx文本的div* 可见选择器
$("div:visible") 匹配所有显示的div $("div:hidden") 匹配所有隐藏的div* 显示隐藏相关方法:
$("#abc").show() 让id为abc的元素显示 $("#abc").hide() 让id为abc的元素隐藏 $("#abc").toggle() 让id为abc的元素显示隐藏切换* 属性选择器
$("div[属性名]") 匹配包含xxx属性的div$("div[属性名='值']") 匹配xxx属性=xxx值的div $("div[属性名!='值']") 匹配xxx属性不等于xxx值的div* 子元素选择器
$("div:first-child") 匹配是div并且是子元素并且是第一个子元素 $("div:last-child") 匹配是div并且是子元素并且是最后一个子元素 $("div:nth-child(n)") 匹配是div并且是子元素并且是第n个子元素 n从1开始* 表单选择器
$(":input") 匹配表单中的所有控件 $(":password") 匹配所有密码框 $(":radio") 匹配所有单选 $(":checkbox") 匹配所有多选 $(":checked") 匹配所有选中的单选/多选和下拉选 $("input:chekced") 匹配所有选中的单选和多选 $(":selected") 匹配所有选中的下拉选* 遍历其相应选择器返回的数组
//弹出所有 :checked 元素的value值" id="b4" $("#b4").click(function(){ //只能取到数组的第一个元素的value值 //alert($(":checked").val()); //遍历数组的每一个元素 $(":checked").each(function(){ //遍历的过程中this代表遍历的每一个“js对象” alert(this.value); }); });
内容总结
以上是互联网集市为您收集整理的jQuery学习笔记全部内容,希望文章能够帮你解决jQuery学习笔记所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。