JQuery

目录

JQuery

JQuery选择器

JQuery事件

JQuery对DOM元素的操作

JQuery

jQuery是一个快速、简洁的javaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简，jQuery只是一个jquery-xxx.js文件。

JQuery的使用

我们只需要在我们网站的head中引入jquery文件即可。

$符号

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名，即  $ ==  jQuery

document.getElementById('test'); //普通JavaScript写法

$('#test'); //JQuery写法

jQuery('#test'); //JQuery的另外一种写法

文档就绪事件(入口函数)

这是为了防止文档在完全加载之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作

JQuery的写法

$(document).ready(function(){

// 开始写 jQuery 代码...

});

//或者

$(function(){

// 开始写 jQuery 代码...

});

普通JavaScript的写法

window.onload = function () {

// 执行JS代码

}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

JQuery选择器

jQuery 选择器允许对 HTML 元素组或单个元素进行操作，jQuery 选择器基于元素的 id、class、type、attr、属性值等选择HTML 元素。 它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$( )

$("*") //选取所有元素

$("p") //选择页面所有的p标签元素

$("#test") //选择id为test的标签元素

$(".test") //选择class为test的标签元素

$(this) //选取当前HTML元素

$("p.test") //选取class为test的p元素

$("p:first") //选取第一个p元素

$("ul li:first") //选取第一个ul元素的第一个li元素

更多的选择，传送门：http://www.runoob.com/jquery/jquery-selectors.html

JQuery事件

常见的事件

//hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(

function(){

alert("你进入了 p1!");

},

function(){

alert("拜拜! 现在你离开了 p1!");

}

);

//点击事件

$("p").click(function(){

$(this).hide();

});

JQuery对DOM元素的操作

获取内容和属性值

这是段落中的 粗体 文本。

菜鸟教程

名称:

显示文本

显示 HTML

显示 href 属性的值

显示value的值

设置内容和属性值

这是段落中的文本。

菜鸟教程

姓名:

爱好： 运动

听音乐

阅读

设置文本

设置 HTML

设置图片src属性的值

设置 value的值

设置爱好为听音乐

参考文章：http://www.runoob.com/jquery/jquery-tutorial.html

HTML jQuery

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。