jquery学习笔记

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");