不修改HTML代码纯jQuery命令怎么写

    js中有很多的事件属性和方法,我在初学时写的命令通常需要在HTML标签中添加各种的on***事件来调用js中的function函数.而在正式分组配合开发中,HTML代码已经由前端设计好了,你随便去修改他的代码,前端小姐姐会很不高兴.(ヽ(✿ﾟ▽ﾟ)ノ),那在实际的开发中如何使用js和jQuery来实现不修改HTML代码而完成事件的触发和函数的调用呢?

     js中我们通常使用document.getElementById(),document.getElementsByName(),或者document.getElementsByTagName()来获取标签对象,然后进行各类操作.而jQuery只需要用$("*") 一句话就能直接访问所有标签.选择器的问题就说到这里,具体选择器的种类和用法可以参见API帮助文档.

    那么在js事件中有这样一个事件叫做window.onload(){}加载完成事件.有了这个事件我们就可以利用他来加载js代码.使之在网页页面加载完成时,直接运行js代码.那么他是如何使用的呢?例如:

例:

<script type="text/javascript">

//网页加载完成弹出提示框hello,word

window.οnlοad=function(){
        alert("hello,word")

}

</script>

window.onload事件直接触发一个匿名函数,就等于是网页加载完成以后直接运行了这个函数里面的内容.

那么在jQuery中又是如何编写加载完成后运行的事件呢?

例:

<script type="text/javascript" src="js/jquery-1.11.0.js"></script><!--导入jQuery包-->
<script type="text/javascript">
$(document).ready(function(){
alert("hello,word");
})

</script>

例2(简写):

<script type="text/javascript" src="js/jquery-1.11.0.js"></script><!--导入jQuery包-->
<script type="text/javascript">
$(function(){
alert("hello,word")
})
</script>

$(document).ready() 就替代了window.onload 而且ready()是一个事件函数,他的参数需要是一个函数.所以我们就可以在()直接加入匿名函数 function(){} 在大括号中直接写函数内容,当然也可以在打括号中调用其他函数,而简写的方法则更简洁,直接在工厂函数$()中创建一个匿名函数,用于加载完成后的直接运行调用.例如用$(function)方法来操作一个text表单

例:

$(function() {  //运行完成加载
$("#myuser").focus(function() {  //用id选择器选择text表单 获取焦点后执行匿名函数
$(this).val("").removeClass("bk");
$("#uspan").removeClass("err");
$("#uspan").removeClass("true");
$("#uspan").html("");
}).blur(function() {})    //失去焦点后运行匿名函数
if($(this).val() == "") {
$("#uspan").html("");
$(this).val("请输入账号");
uname = false;
}
if($(this).val().length < 6) { //如果用户名小于6
$("#uspan").addClass("err");
$("#uspan").html("用户名不能小于6位");
$(this).addClass("bk");
uname = false;
} else {
$("#uspan").html("√");
$("#uspan").addClass("true")
uname = true;
}
})

})

总结:用以上方法来执行纯js/jQuery代码,就可以不用修改或添加Html代码.前端小姐姐再也不会对你横眉立目,是不是很方便呢?