版权声明:本文为博主原创文章,未经博主允许不得转载。
jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Browser Object Model BOM对象: 1.window:BOM根对象 2.window.navigator 浏览器对象 3.window.location : URL地址对象 4.window.document: 文档对象。 5.window.history 历史对象 【】DOM DOM根对象:window.document 表示浏览器载入的文档在内存中模型。 DOM模式的格式:树。 每个标记表示一个对象,在树中是一个节点。 1. JS定位一个节点方法 (1)根据ID定位:var div=document.getElementById("id"); 返回一个对象 (2)根据标记名定义:var div=document.getElemenetByTagName("div"); 返回对象的数组。 (3) 根据CSS选择器选择对象: var ob=document.querySelector("css选择器");返回满足选择器的第一个对象 例子: <input type="text" name="userid" id="userid" /> var userid=document.querySelector("input[name='userid']"); var userid=document.querySelector("#userid"); var userid=document.querySelector("input"); (4) 返回所有的选择器选择的对象:返回对象数组。 document.querySelectorAll("CSS选择器") 【】DOM操作节点对象 1.读/写节点的内容 <div id="maincontent"> </div> var div01=document.querySelector("#maincontent"); div01.innerHTML="你好"; div01.innerText="你好"; var info=div01.innerHTML; var info=div01.innerText; 2.读写FORM表单元素的值 <input type="text" name="userid" id="userid" /> var userid=document.querySelector("#userid"); userid.value="001"; var v=userid.value; 3. 读写节点的样式 <div id="maincontent">AAA </div> var div01=document.querySelector("#maincontent"); div01.style.backgroundColor="blue"; var color= div01.style.backgroundColor; 4. 设置节点对象的事件 var div01=document.querySelector("#maincontent"); div01.onclick=function(event){ alert(div01.innerHTML); }; 5.读写对象的属性 <a id="link01" class="link" href="#">测试</a> var a=document.querySelector("#link01"); var href=a.href; a.href="docyument/add.mvc"; 【】jquery引入 <script src="js/jquery.js"></script> 【】jQuery语法: 1.操作DOM节点: $(选择器).函数(参数); 2.通用的函数,不针对DOM节点 $.函数(参数); $.get, $.post, $.getJSON, $.each 【】jquery的节点选择器:使用CSS选择 1.ID选择器 $("a#link01).on("click",function(){}); 2.class选择器 $(".link).on("click",function(){}); 3.标记选择器 $("a").on(); 4.属性选择器: $("input[name='userid']").on("blur",function(){}); 5. 组合选择器 (1) 子选择器:$("div a"). (2)平行选择器: $("div,ul,li,a"). (3) 直接子选择器:$("div>a"). 【】jquery操作DOM节点 1.读写节点内容:html(), text() $("a#link01).html("你好"); $("a#link01).text("你好"); var info=$("a#link01).html(); var info=$("a#link01).text(); 2.读写表单元素值 $("input#userid").val("001"); var v=$("input#userid").val(); 3.读写节点的样式:css $("div#maincontent").css("background-color","blue"); var color=$("div#maincontent").css("background-color"); $("div#maincontent").css({"background-color":"blue", width:"100%",height:"400px" }); 4.DOM节点注册事件 $("div#maincontent").on("click",function(event){ }); $(document).ready(function(){}); 5.读取节点的属性 var url=$(this).attr("href"); $("a#link01").attr("href","dept/add.mvc"); 【】jquery的AJAX封装函数 1.$.get("url",{参数},function(data){}); 2.$.post("url",{参数},function(data){}); 3.$.getJSON("url",{参数},function(data){}); 【】jquary绑定 节点多的时候使用! 1.绑定 $(document).ready(function(){ $("button#button01").bind("click",clickHand01); $("button#button02").bind("click",clickHand02); $("button#button01").unbind("click"); }); function clickHand01(){ alert("hello!"); };