jquery(2)

来源：互联网发布：整人软件编辑：程序博客网时间：2024/05/21 21:34

0.事件的注册机制：
*基于html代码的事件注册
function clicked(){
xxxxxx
}
<input type="button" value="click_me" id="btn" onclick="clicked();"/>
解耦和
*基于js代码的事件注册
window.onload=function(){//注册onload事件，在文档加载完成后触发执行
var btn=document.getElementById("btn");
btn.onclick=function(){//对btn注册单击事件
xxxxxx
}
}
<input type="button" value="click_me" id="btn"/>
*注意：在事件注册时刻，保证事件源已经被加载了
==============================================================================
1.jquery对于js事件的管理
*ready函数：
$(document).ready(function(){//在文档加载完成后触发执行
xxx
});
*事件：
事件名事件函数
click click(); 单击
dblclick dblclick(); 双击
focus focus(); 获得焦点
blur blur(); 失去焦点
mouseover mouseover(); 鼠标移入
mouseout mouseout(); 鼠标移出
mousemove mousemove(); 鼠标移动
mousedown mousedown(); 鼠标左键按下
mouseup mouseup(); 鼠标左键抬起
change change(); 内容改变并失去焦点
句柄：事件触发时执行的代码块
*toggle(fn1,fn2,fn3,...):[事件函数]复合的单击事件，当被单击时会依次循环的执行多个句柄
*toggle():[功能函数]可以自动切换元素的显示状态
:toggle(1000) 在1000毫秒内切换显示状态
*hover(fn1,fn2):一次性的注册mouseover和mouseout事件，当鼠标移入时执行
fn1，当鼠标移出时执行fn2
*submit();提交form
$("form").submit();
=============================================================================
2.DOM编程 Document Object Model
*增
1>append(html);向内部最后一个位置追加子标签
2>prepend(html);向内部第一个位置追加子标签
3>before(html);在之前追加一个兄弟标签
4>after(html);在之后追加一个兄弟标签
*删
1>empty();清空子标签
2>remove();删除自己
*改
*input 标签的type属性是只读属性，不允许更改
1>val();//获取元素的value属性值
val(String);//设置元素的value属性值
2>text();//获取元素标签体内部的文本
text(String);//设置标签体内的文本
3>html();//获取元素内部的html代码
html(html);//设置元素内部的html代码
4>attr("属性名");//获取属性值
attr("属性名","属性值")//设置对应的属性值
attr({属性名:"属性值",属性名:"属性值",....});
5>css("样式属性名");//获取属性值
css("样式属性名","属性值")//设置对应的属性值
css({样式属性名:"属性值",样式属性名:"属性值",....});
6>addClass(样式类名) 增加样式类
removeClass(样式类名) 移除样式类
7>prop("属性名");//获取属性值(适用于获取boolean类型的属性值)
prop("属性名",true/false);//设置boolean类型的属性的值
*注意：在获取、设置boolean类型的属性时attr存在问题，此时可使用prop方法
prop方法是jquery-1.7.x 之后对于attr的补充
*查
选择器
*筛选方法：
1>parent();//获取父节点
$("#txt").parent();--div
2>children();//获取子节点
$("div").children();--3个input
3>next();//获取下一个兄弟节点
$("#txt").next();--id为txt2的input
4>prev();获取上一个兄弟节点
$("#txt3").prev();--id为txt2的input

<div>
<input type="text" id="txt"/>
<input type="text" id="txt2"/>
<input type="text" id="txt3"/>
</div>

=============================================================================

实用：

利用class属性，动态获取值和赋值

例一：利用属性class获取值，并且利用逗号（,）分割

$("#checkOk").live("click",function(){
var str="";
var hdmc2="";
var choice=$(".yourChoice");
var choiceName=$(".choiceName");
var ck=$(".ck");
for(var i=0;i<choice.length;i++){
if($(ck[i]).prop("checked")==true){
str+=$(choice[i]).val()+',';
hdmc2+=$(choiceName[i]).val()+',';
}
}

});

<table>

例二、利用class属性，动态赋值

$("#choice").click(function() {

var pn1= $(".itemName");
var po1= $(".itemOrder");
var img1=$(".imageUrl");
//使得后台servelt能获取到属性的值
for(var j=0;j<pn1.length;j++){
for(var i=0 ;i<pn1.length;i++){
$(pn1[i]).attr("name","item["+i+"].name");
$(po1[i]).attr("name","item["+i+"].orderNum");
$(img1[i]).attr("name","item["+i+"].imgUrl");
}

}

)};

<input type="text" class="itemOrder" style="width: 30px;"\/>//如果是jquery动态添加body内容，注意末尾加上\

0 0