jQuery技术全解析

发表时间: 2023-06-06 19:57

一、Jquery:目前流行的JavaScript程序库,它是对JavaScript对象和函数的封装。

设计思想:写的更少,做的更多。(write less,do more)

目的:提高开发的效率。

二、(搭建jquery的开发环境)使用Jquery的步骤:

1.下载jquery的文件(js文件:例如jquery-1.9.1.min.js),并添加项目中

2.在网页中使用script标签引用Jquery文件

<script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

三、jquery的加载事件

//加载事件 等价于onload

$(document).ready(function(){

alert("helloword");

});

//加载事件的简化写化

$(function(){

alert('我是jquery的加载事件');

});

四、jquery的语法结构:

$(选择器).函数(参数)|事件名称(匿名函数);

1.选择器:作用定位(选取)dom元素

2.$()工厂函数:将dom对象转化为jquery对象

注意:只有是jquery的对象才能调用jquery的函数

五、使用jquery给标签绑定事件

注意:jquery的事件名称就是标签事件名称不加on,但是onload(对应的jquery事件是:ready)除外

语法:

jquery对象.事件名称(匿名函数);

六、jquery常用函数|方法

1.使用val([值])函数控制表单对象的值

加参数表示设置值,不加参数表示取值

jquery对象.val([值]);

2.使用text([内容])或者html([内容])控制非表单对象的内容

$("#notice").text("通过<br/>验证"); //不支持解析标签

$("#notice").html("通过<br/>验证"); //支持解析标签

3.控制样式

3.1使用css方法

$("#notice").css("样式属性","样式属性值"); //设置单个样式

$("#notice").css({"样式属性":"样式属性值","样式属性":"样式属性值"}); //设置单个样式

$("#notice").css("color","green");

$("#notice").css({"font-size":"24px","border":"1px solid red"});

3.2使用addClass添加类样式

$("#notice").addClass("ok");

3.3使用removeClass移除类样式

$("#notice").removeClass("ok");

七、dom对象与jquery对象之间的转换

1.将dom对象转化为jquery对象

jquery对象=$(dom对象);

2.将jquery对象转化为dom对象

$("#checkbox")[0].checked=true;

$("#checkbox").get(0).checked=true;

注意:jquery对象一个数组对象,从中获取某个元素即为dom对象。