jQuery基础

来源：互联网发布：mac鼠标怎么复制粘贴编辑：程序博客网时间：2024/06/07 15:55

1_感受jQuery

为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了.

当前流行的JavaScript库有：

jQuery, MooTools, Prototype, Dojo, YUI,

EXT_JS DWR

www.open-open.com

这些其实也就就是JavaScript的框架，对JavaScript进行了更好的封装，简化了书写

所以使用jQuery往往只要少量的代码，更简短的属性和函数名

使用：

需要将jQuery的源码复制到当前项目中

引入以下三个任何一个都可以，其中1.4.2为经典版本，推荐使用

引入jquery的js库

<head>

</head>

<body>

</body>

//测试

//使用document输出

//var username = document.getElementById("username");

//alert(username.value);

//使用JQuery输出

* juqery：

* * $变量名

* * $()

var $username = $("#username");//document.getElementById("username");

alert($username.val());//username.value

</script>

定义变量

var $变量名;

2_Dom和jQuery对象的互转

Dom转化为jQuery对象

格式：${DOM对象}

//dom转化为JQUery对象 $(DOM对象)

var username = document.getElementById("username");

//转换

var $username = $(username);

alert($username.val());

jQuery对象转化为DOM对象

两种方法转化：

(1) jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

var username = $username[index];

(2) jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

var username = $username.get(index);

代码示例：

var $user = $("#username");

//var user = $user[0];

var user = $user.get(0);

alert(user.value);

3_事件的书写格式

格式：

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

});

注意和JavaScript DOM中的区别:

DOM对象.onclick = function(){

}

代码示例：

实现以下功能：

//<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>

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

* css(name,value):

* * 作用设置对应元素的样式

* * name：属性名，有固定名，应从对应css样式帮助文档中查找

* * value：属性值

$("#one").css("background","#0000FF");

});

4_选择器

1_基本选择器

#id 根据给定的ID匹配一个元素。

$("#id")--id的值

element 根据给定的元素名匹配所有元素

$("tagName");--标签名

.class 根据给定的类匹配元素。

$(".myClass");--class属性的值

* 匹配所有元素

$("*")

selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。

$("div,span,p.myClass")--多个选择器之间用“,”隔开。

5_Boolean类型

注意：

JavaScript中的函数返回值为null，或者对象为undefined时，可以表示false

情景一

情景二

情景三

6_注意点汇总：

:nth-child

从索引1开始的

html()

--相当于DOM中的innerHTML

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

设置html的内容用html(val)

text()

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

ready(fn)

$(document).ready()这个方法纯粹是对向window.load事件注册事件的替代方法。

相当于是DOM中window.onload

this的问题：

示例

描述:

迭代两个图像，并设置它们的 src 属性。注意:此处 this 指代的是 DOM 对象而非 jQuery 对象。

HTML 代码:

jQuery 代码:

$("img").each(function(i){

this.src = "test" + i + ".jpg";

});

结果:

[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

完善的事件处理机制

//如果id值不存在，将会报错，需要判断

//DOM对事件的处理

var username = document.getElementById("username111");

//if(!username){

//alert("ID不存在")

//}else{

//alert(username.value);

//}

//即使id值不存在也不会抛错，容错性更好

//jquery对事件的处理，说明jquery里有相对完善的事件处理机制

//var $username = $("#username111");

//alert($username.val());

jQuery对象遍历后得到的结果是dom对象

* <p>段落1</p>

//遍历得到的结果是DOM对象，需要转成jQuery对象

$("p").each(function(index,domEle){

$(domEle).click(function(){

alert($(domEle).text());

});

jQuery中创建元素节点和文本节点

//直接写出完整的标签

var $nameTd = $("<td></td>");

//直接往文本中添加内容就创建了文本节点

$nameTd.text($nameValue);

删除节点

不同于DOM中需要找到父节点，jQuery中可以自己删除自己

$variable.remove();

DOM对象中defaultValue永远获取value属性指定的原值

<body>

<br>

</body>

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

//无论在文本框中输入什么值结果都是：用户邮箱/手机号/用户名

alert($("#b1")[0].defaultValue);

});

</script>

焦点事件

获取焦点focus

失去焦点blur

trim(str)去除前后空格

只有这么一个方法，被操作的字符串放在括号中

$.trim($("#b1").val())