- jQuery库引入
<script type="text/javascript" src="js/jquery-2.1.3.js"></script> <script type="text/javascript"> alert(jQuery) alert($) alert($===jQuery) </script>
- 获取jQuery对象
<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript"> //当页面内容渲染完毕之后，再执行匿名函数中的内容 window.onload = function(){ //获取dom节点 var mydiv = document.getElementById("mydiv"); console.debug(mydiv); //获取jquery对象(根据id获取jquery对象) var mydiv = $("#mydiv"); console.debug(mydiv);// } </script> </head> <body> <div id="mydiv">这是我的div</div> </body>
- $(function(){ 内容 })和window.onload的区别
window.onload = function(){ alert(3); } $(document).ready(function(){ alert(2); }); $(function(){//简写方式 alert(1); });
相同点：它们都是用来加载页面的
不同点： window.onload是页面内容渲染完毕之后，执行匿名函数中的内容,而
是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说(function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说(function)是页面结构加载完毕之后，执行匿名函数中的内容，所以在性能方面来说(function)的性能要高于window.onload所以以后推荐使用$(function)
- jQuery对象和dom对象的相互转换
<script type="text/javascript" src="jquery/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $(function(){ //根据id获取jquery对象 var mydiv = $("#mydiv"); /*把jQuery对象转为dom节点： 1.var dom = jQuery对象.get(0); 2.var dom = jQuery对象[0] 推荐使用(简写) */ var dom = mydiv[0]; console.debug("dom对象:"+dom) /* 把dom节点转为jQuery对象: 1.var jqy = $(dom节点) */ var jqy = $(dom); console.debug("jQuery对象:"+jqy) }); </script> </head> <body> <div id="mydiv">这是我的div</div> </body>
- jQuery基本选择器
参考jQuery文档哟：选择器是为了选中HTML页面中的dom节点，而得到Jquery对象 ，通过Jquery对象去操作dom节点
#id id选择器 根据id获取jQuery对象(单个)
element 元素选择器 根据标签名获取jQuery对象(多个)
.class 类型选择器 根据类型名获取jQuery对象(多个)
selector1,selector2,selectorN 组合选择器 根据多个选择器组合在一起，选中多个
<script type="text/javascript"> $(function(){ //1.根据id获取jQuery对象 var mydiv = $("#mydiv"); console.debug(mydiv); //2.根据元素匹配多个jQuery对象 var divs = $("div"); console.debug(divs); //3.根据类型匹配多个jQuery对象 var hobbies = $(".hobbies"); console.debug(hobbies); //4.组合选择器匹配多个jQuery对象 var elements = $("#mydiv,input,a"); console.debug(elements); }); </script> </head> <body> <div id="mydiv">这是我的div</div><br/> <input type="text" name="username" class="hobbies"><br/> <input type="text" name="password" class="hobbies"><br/> <input type="text" name="age" class="hobbies"><br/> <a href="javascript:void(0)" class="hobbies">超链接</a><br/> <div>这是div2</div> </body>
- jQuery的for循环
场景：例如有多个input按钮，获取每个按钮的value值 第一种：传统的遍历方式：var $objs = $("input:button"); for(var i = 0 ; i < $obj.length ; i++){ console.debug( $obj[i]) );//注意$obj[i]是一个dom对象 } 第二种：jQuery提供的each函数 //$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点 $obj.each(function(index , obj){ alert($(obj).val()); });
- JQuery注册事件的四种方式
<body> <input type="button" value="注册事件方式1" id="btn1"> <input type="button" value="注册事件方式2" id="btn2"> <input type="button" value="注册事件方式3" id="btn3"> <input type="button" value="注册事件方式4" id="btn4"> </body>
- 注册事件方式1
/* jquery注册事件方式1语法格式： jquery对象.事件名(function(){ }) */ //注册事件方式1 $("#btn1").click(function(){ alert("注册事件方式1"); });
- 注册事件方式2
/* jquery注册事件方式2语法格式： jquery对象.bind("事件名",function(){ }) */ //注册事件方式2 $("#btn2").bind("click",function(){ alert("注册事件方式2"); })
- 注册事件方式3[推荐]支持事件委托机制
/* jquery注册事件方式3语法格式:（老师推荐使用，因为兼容性最好，功能最强大---因为支持事件冒泡） jquery对象.on("事件名",[选择器],function(){ }) */ //注册事件方式3 $("#btn3").on("click",function(){ alert("注册事件方式3"); })
- 注册事件方式4
/* jquery注册事件方式4语法格式： jquery对象.one("事件名",function(){ });特点：一次生效之后，自动注销事件 */ //注册事件方式4 $("#btn4").one("click",function(){ alert("生效一次之后，自动注销事件"); })
- 注销事件[推荐]
/* 注销事件的语法格式：jquery对象.off(); */ //注销事件 $("#btn1").off();
- 事件委托机制
<input type="button" value="动态添加按钮" id="btn"> <div id="filediv"> <input type="button" code="button" value="按钮"><br/> </div>
<script type="text/javascript"> $(function(){ $("#btn").on("click",function(){ $("#filediv").append('<input type="button" code="button" value="按钮"><br/>'); }) /* $("input[code]").on("click",function(){ alert("注册成功!"); }) 这种注册方式，只会在加载结构的时候，满足条件的才会注册事件，动态追加的，就没法注册成功 怎么解决呢？答：我们可以使用事件委托机制*/ //事件委托机制，注册给filediv 通过他委托给input[code] $("#filediv").on("click","input[code]",function(){ alert("注册成功!!"); }) }); </script>
- JQuery中的方法[练习]
- jQuery操作html/文本/value属性值
html()，text()，val()
<div id="mydiv"><h1>这是我的div</h1></div>
var text = $("#mydiv").text();//获取文本，仅仅获取文本 console.debug(text); $("#mydiv").text("<h2>我只会当纯文本进行展示哦</h2>");//设置文本
javaweb实训第二天上午——jQuery笔记(2）https://developer.aliyun.com/article/1414831?spm=a2c6h.13148508.setting.21.4d4d4f0erzCTC6
