Dom中动态设置事件和静态设置。Jquery中一般习惯动态设置。
$(document).ready(function() { alert("加载完毕!"); })
//注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件
当页面Dom元素加载完毕时执行代码,可以简写为:
$(function() { alert("加载完毕!"); });
JQuery选择器用于查找满足条件的元素,比如可以用$("#控件Id")来根据控件id获得控件的jQuery对象,相当于getElementById:
$(“#div1”).html(“<font color=red>hello</font>”)
语法、意义类似于CSS选择器
ljQuery对象就是通过jQuery包装Dom对象后产生的对象:alert($('#div1').html())。Dom对象要想通过jQuery进行操作,先要转换为JQuery对象。
l$('#div1').html()等价于:document.getElementById("div1").innerHTML;
l$('#div1')得到的就是jQuery对象,jQuery对象只能调用jQuery对象封装的方法,不能调用Dom对象的方法,Dom对象也不能调用jQuery对象的方法,所以alert($('#div1').innerHTML是错的,因为innerHTML是DOM对象的属性。
lArray是JS语言本身的对象,不是Dom对象,因此不需要转换为Jquery对象才能用
(*)将Dom对象转换为JQuery对象的方法,$(dom对象);
jQuery修改样式:
$(“#div1”).css(“background”, “red”);
value:$(“#un”).val(“abc”)
CSS选择器,同时选择拥有样式的多个元素(类似于CSS选择器)
<style type="text/css"> .test{ background-color:Red} </style> <script type="text/javascript"> $(function() { $(".test").click(function() { alert($(this).text()); }); }); </script> <p class="test">test1</p> <p class="test">test2</p> <p class="test">test3</p>
标签选择器,拥有样式的标签选择器
JQuery的迭代
l如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在,应该写:
if ($("#btn1").length <= 0) { alert("id为btn1的元素不存在!"); }
JQuery的Dom操作
1、使用html()方法读取或者设置元素的innerHTML:
alert($("#btn1").html()); $("#btn1").html("hello");
2、使用text()方法读取或者设置元素的innerText:
alert($("#btn1").text()); $("#btn1").text("hello");
3、使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。
alert($(“#btn1").attr("href")); $("#btn1").attr("href", "http://www.rupeng.com");
节点遍历
next()方法用于获取节点之后的挨着的第一个同辈元素
l$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有同辈元素,$(".menuitem").nextAll("div")
lprev、prevAll兄弟中之前的元素。
siblings()方法用于获取所有同辈元素,