JQuery实战总结

最新推荐文章于 2021-10-12 11:19:56 发布

HYunEr

最新推荐文章于 2021-10-12 11:19:56 发布

阅读量1.2k

点赞数 7

本文链接：https://blog.csdn.net/mingxuanyun/article/details/19159441

版权

jQuery实战视频首先给自己最大感受的就是，这个老师编写代码的思路很清晰，以及描述整个事件的过程也很清楚。以前我们再开始敲代码的时候，都是一上来就开始敲起代码。而视频老师却是在动手写代码的时候，就先把每一个步骤用注释的格式，把他们罗列出来，在写代码的时候只需要对号入座就OK了。我觉得现在是时候开始让自己培养良好的编程习惯了！
其次就是，对如何操作HTML和CSS样式表，有了更进一步的了解。HTML页主要是实现网页的布局以及内容，即你所希望在这个网页上显示什么内容给大家。CSS样式表就是对你要显示的内容进行一个外观上的丰富。让你的界面更加美观。如何操作CSS，最主要的就是找出你需要操作的那个节点。jQuery跟CSS很相似，但是更多的是定义界面的行为。但是jQuery是什么呢？它包括什么内容？它有什么用呢？我们怎么用它呢？

一、什么是jQuery?
jQuery 是一个兼容多浏览器的Javascript框架，核心理念是“write less,do more(写得更少,做得更多)”也就是让程序员能够写更少的代码，实现更多的功能。jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery的特性：操作DOM文档对象，选择DOM元素，制作动画效果，事件处理，使用AJAX以及其他功能等。
Jquery能够使用户的html页面和html内容分离，也就是说，不需要在html里面插入一堆js来调用命令，只需要定义id就可以了。

二、jQuery 如何使用？
在使用jQuery之前，需要到网站下载：http://jquery.com/download/然后添加到我们的jQuery库中，语法如下：

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

例如：下面的小例子：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">


//页面加载时执行以下代码
$(document).ready(function(){
//单击按钮(p标签)需要执行的代码
$("button").click(function(){
//让p标签隐藏
$("p").hide();
});
});
</script>
</head>

<body>
<h2>测试</h2>
<p>单击按钮，我会被隐藏</p>
<p>单击按钮，我也会被隐藏</p>
<button type="button">Click me</button>
</body>
</html>

三、jQuery的语法：
jQuery语法是为HTML元素的选取编制的，可以对元素进行某些操作。基础语法是：$(selector).action()

美元符号定义jQuery
选择符(selector)"查询"和"查找"html元素
jquery的action()执行对元素的操作。

示例：

$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有段落
$(".test").hide() 隐藏所有class="test"的所有元素
$("#test").hide 隐藏所有id="test"的所有元素

四、什么是jQuery选择器？
选择器是指允许对元素组或单个元素进行操作。基本选择器包括：

元素选择器：$("p") 选取 <p> 元素。
属性选择器：$("[href]") 选取所有带有 href 属性的元素。
CSS选择器：$("p").css("background-color","red"); 更改P元素的背景颜色为红色

五、事件处理

jQuery是为事件处理特别设计的。jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。

常见的jQuery事件方法：

jQuery事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

1.触发实例：

$("button#demo").click()

上面的例子将触发 id="demo" 的 button 元素的 click 事件。

2.绑定实例：

 $("button#demo").click(function(){$("img").hide()})

上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。

六、什么是jQuery对象？

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法。例如：

$("#foo").html();  // 获取id为foo的元素内的html代码。.html() 是jQuery里的方法。

这段代码等同于：

document.getElementById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法。比如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以用$("#id").html()和$("#id").attr("checked")之类的jQuery方法来替代。同样，DOM对象也不能使用jQuery的里方法，例如document.getElementById("id").html()也会报错，只能用document.getElementById("id").innerHTML语句。)