document对象的方法:
document.getElementById("id的属性值");
document.getElementsByTagName("input");//获取指定的元素节点
document.getElementsByName("name属性值");
window.open("网页地址","网页的名字","特征");
1、选择器
基本选择器
ID、类选择器、标签选择器、交集选择器
$("#menu")
$(".menu")
$("img")
$("input.menu")
层次选择器
$("#menu div");//获取所有div后代
$("#menu>div");//获取的所有的div子节点
属性选择器
$("input[name=username]") $("img[alt=aa]")//这个是必须记下
$("input[name^=form]")//name属性值以form开头
$("input[name$=form]")//name属性值以form结尾
$("input[name*=form]")//name属性值可以包含有form
基本过滤选择器
$("tr:odd")//奇行
$("tr:even")//偶行
$(":eq(0)")//获取第一个
$(":lt(0)")//小于 little
$("tr:gt(2)")//大于第三行的所有行。 global
可见性过滤选择器
$("li.gt(2):visible").hide();
$("li.gt(2):hidden").show();
toggle();--切换元素的可见性。
$("li:gt(2)").toggle();//从第三个li开始,进行切换可见性。
2、事件
1、鼠标悬停事件 mouseover() mouseout
2、键盘事件:keydown();//判断用户是否按了Enter回车键 keyCode == '13'
$(document).keydown(function(e){
if (e.keyCode == '13') {
}
});
3、表单事件:
focus() 获得焦点
blur()失去焦点
复合事件:
hover()
togger()//模拟鼠标连续点击事件
bind();
//鼠标悬停,移走
$(".li").hover(
function(){
//悬停
},function(){
//移走
});
//模拟鼠标连续点击事件
$(".btn").toggle(
function(){
},function(){
}
);
//同时toggle可切换元素可见性
/*css({
"":"",
"":""
})
*/
//表单验证里,文本框获取焦点,失去焦点
$("input[id]").bind({
focus:function(){
},blur:function(){}
});
//绑定单个事件
$("input[id]).bind("click",function(){});
$("tr[id]").each(function(index,element){
//element DOM对象 ,index下标,从0开始
var $dom = $(element); //获取具体的input,JQuery对象
$dom.children("td[class=aa]").html();
$dom.parent().parent().parent()
});
$("tr[id=menu1]").find("td").each(function(index,element){
//element DOM对象 ,index下标,从0开始
});
JQuery中的DOM操作
1、样式操作:
css("属性名","属性值");//添加一个样式
css({
"属性名":"属性值",
"":""
});
addClass(类样式的名字);//添加类样式
removeClass();//删除类样式
2、内容及value属性值操作
html();//获取从开始标签到结束标签之间HTML代码(包括文本内容)
text();//获取从开始标签到结束标签之间文本内容
val(); //获取value属性的属性值,获取input里的value属性值
3、节点操作:
append();//在后面追加子节点元素
$("ul").append("
prepend();//前置插入,在前面插入子节点元素
$("ul").prepend("
after();//在后面添加一个同辈元素
4、节点属性操作:
attr()//设置或获取属性值
$("input[type=checkbox]").attr("checked","checked");//复选框选中
5、节点遍历:
$("tr[id]").each(function(index,element){
//element DOM对象 ,index下标,从0开始
var $dom = $(element); //获取具体的input,JQuery对象
$dom.children("td[class=aa]").html();
$dom.parent().parent().parent()
});
next();//获取紧邻下一个同辈元素
children();//获取所有的子元素
parent();//获取父元素
prev();//获取紧邻前一个同辈元素
3、正则表达式(难点,只要记住几个常用的)
/^ $/
\d等价于[0-9]
\w等价于[a-zA-Z0-9_]
{n,}匹配前一项至少n次或多次
{n,m}匹配前一项至少n次,不超过m次
{n}匹配前一项n次
*等价于{0,}匹配0次或多次
+等价于{1,}匹配一次或多次
?等价于{0,1}匹配0次或1次
4、用例:
中国的邮政编码都是6位:var regCode=/^\d{6}$/;
手机号码都是11位,并且第1位都是1:var regMobile=/^1\d{10}$/;
邮箱验证:var regMail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
5,省市级联菜单
1、下拉列表框对象
1)select对象常用事件、方法和属性
事件: onchange 当改变选项时调用的事件
方法: add() 向下拉列表中添加一个选项
属性: options[] 返回包含下拉列表中的所有选项的一个数组
selectedIndex 设置或返回下拉列表中被选项目的索引号
length 返回下拉列表中的选项的数目
2)Option对象常用属性
text:设置或返回某个选项的纯文本值
value:设置或返回被送往服务器的值
2、数组对象
属性: length 设置或返回数组中元素的数目
方法: join( ) 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔
sort( ) 对数组的元素进行排序(按照ASCII码的升序排列)
3、级联菜单:
方法一:
方法二: