Jquery学习笔记
1、在你的页面加入jquery下载jquery的js,将它导入到页面上去,形如下面的样子
<script type="text/javascript" src="js/jquery.js"></script>
(jquery.js是你下载的jquery的js文件名),这样就导入了jquery。
2、使用jquery操作dom对象
2.1通过id得到jquery对象
使用$("#id")的方式得到一个jquery对象
2.2得到dom对象的值
$("#id").val();
例:
HTML 代码:
<input type="text" id="input" value="some text"/>
jQuery 代码:
$("#input").val();
结果:
some text
3.使用ajax操作页面显示
jQuery.get(url,[data],[callback]);
例如:
请输入用户名:
<input type="text" id="userName" class="userText"/>
<input type="button" id="vertifyButtion" value="校验"/>
当输入userName时候,点击校验的时候,使用ajax访问后台确认输入的用户名是否可以用
$.get("http://localhost/Jquery/UserVerify?userName"+userName,null,function(response){
//填充内容
$("#result").html(response);
});
其中"http://localhost/Jquery/UserVerify?userName"+userName是url,
function(response){
//填充内容
$("#result").html(response);
}是回调函数;
4、增加某标签内的html标签
例:
HTML 代码:
<div id="result"></div>
jQuery 代码:
$("#result").html("this is innerHtml");
结果:
<div id="result">this is innerHtml</div>
5、给HTML页面加上事件处理
Onclick事件
例:
HTML 代码:
<input type="button" id="vertifyButtion" value="校验"/>
jQuery 代码:
$("#vertifyButtion").click(function(){
//绑定的函数在这里
...
}));
keyUp事件:
例:
HTML 代码:
<input type="text" id="userName" class="userText"/>
jQuery 代码:
$("#userName").keyup(function(){
//绑定的函数在这里
...
});
6、CSS操作
CSS
.userText {
/* 控制文本框的边框是红色的实线*/
border: 1px solid red;
background-image: url(../images/userVerify.gif);
background-repeat: repeat-x;
background-position: bottom;
}
HTML
<input type="text" id="userName" class="userText"/>
加入css
var userNameNode = $("#userName");
userNameNode.addClass("userText");
移除CSS
var userNameNode = $("#userName");
userNameNode.removeClass("userText");