jQuery个人总结_个人基本信息资源-CSDN文库

需积分: 10 125 浏览量 2018-03-08 16:16:03 上传评论收藏 17KB TXT 举报

### jQuery个人总结 #### 1. 认识jQuery **jQuery** 是一款快速、简洁的JavaScript库，它的设计目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等常见功能的操作。通过一个简单的语法就能实现强大的功能，使得网页开发变得更加容易。 - **基本语法**：jQuery 的基本语法是 `$` 符号。例如，`$(document)` 表示获取整个 HTML 文档。 - **API 对比**：与原生 JavaScript 相比，jQuery 提供了一套更加简洁和易于使用的 API。例如，使用原生 JavaScript 获取元素的方式为 `document.getElementById('elementId')`，而在 jQuery 中则简化为 `$('#elementId')`。 #### 2. 页面加载完成后的操作在 jQuery 中，通常使用 `$(document).ready(function() {})` 来确保页面加载完成后执行某些代码。这比原生 JavaScript 的 `window.onload` 函数更为灵活，因为后者会在整个页面包括图片等资源加载完毕后才触发，可能导致页面响应较慢。 - **区别**：`window.onload` 只能被调用一次，如果多次绑定将只有最后一次生效；而 `$(document).ready` 可以被多次调用，并且每次都会执行相应的函数。 - **应用场景**：当需要在页面加载完成后立即进行 DOM 操作时，建议使用 `$(document).ready` 方法。 #### 3. jQuery 中的 `ready` 方法的不同写法 - **写法一**：`$(function() {})` - **写法二**：`$.ready(function() {})` 这两种写法都能达到相同的效果，即在文档准备就绪时执行函数中的代码。 #### 4. 引入 jQuery 文件要在项目中使用 jQuery，需要在 HTML 文件的 `<head>` 部分引入 jQuery 库。例如： ```html <script type="text/javascript" src="path/to/jquery-1.6.4.min.js"></script> ``` 这里的 `1.6.4` 版本可以根据实际需求选择最新或合适的版本。 #### 5. jQuery 的基本操作下面通过几个示例来展示如何使用 jQuery 进行基本操作： - **为奇数行添加样式**： ```javascript $("table.datalist tr:nth-child(odd)").addClass("a02"); ``` - **为偶数行添加样式**： ```javascript $("table.datalist tr:nth-child(even)").addClass("a02"); ``` - **向指定元素追加内容并设置颜色**： ```javascript $("table#a01").append("<tr><td>ss</td><td>bb</td><td>nb</td></tr>").css("color", "red"); ``` - **为特定类名的元素添加子元素**： ```javascript $("tr.a02").append("<td>ok</td>"); ``` 这些示例展示了 jQuery 在选择元素和进行操作方面的强大能力。 #### 6. 使用 jQuery 和 JavaScript 实现相同功能下面分别用原生 JavaScript 和 jQuery 来实现为元素设置颜色的功能： - **原生 JavaScript**： ```javascript window.onload = function () { var ss = document.getElementById("a01"); if (ss) { ss.style.color = "pink"; } }; ``` - **jQuery**： ```javascript $(document).ready(function () { $("#a01").css("color", "green"); }); ``` 可以看到，使用 jQuery 的代码更加简洁。 #### 7. 元素选择器 jQuery 提供了丰富的选择器，用于选择页面中的元素： - **标签选择器**：`$("h3")` 选择所有 `<h3>` 标签。 - **ID 选择器**：`$("#a01")` 选择 id 为 `a01` 的元素。 - **类选择器**：`$(".a02")` 选择 class 为 `a02` 的所有元素。 - **通用选择器**：`$("*")` 选择页面中的所有元素。 - **组合选择器**：`$("h3, #a01, .a02")` 同时选择 `<h3>` 标签、id 为 `a01` 的元素和 class 为 `a02` 的所有元素。 #### 8. 事件处理事件处理是 jQuery 的一个重要特性。以下是一些常用的事件处理示例： - **移除所有元素的内联样式**： ```javascript $("#res").click(function () { $("*").removeAttr("style"); }); ``` - **为 id 为 one 的元素设置颜色**： ```javascript $("#but1").click(function () { $("#one").css("color", "red"); }); ``` - **为 class 为 grBed 的所有元素设置颜色**： ```javascript $("#but2").click(function () { $(".grBed").css("color", "red"); }); ``` - **为所有 div 元素设置颜色**： ```javascript $("#but3").click(function () { $("div").css("color", "red"); }); ``` - **为所有元素设置颜色**： ```javascript $("#but4").click(function () { $("*").css("color", "red"); }); ``` - **为 span 元素和 id 为 two 的元素设置颜色**： ```javascript $("#but5").click(function () { $("span, #two").css("color", "red"); }); ``` 以上示例展示了如何使用 jQuery 的事件处理机制来响应用户操作，并对页面元素进行动态修改。 jQuery 是一个非常强大且实用的 JavaScript 库，它简化了许多常见的网页开发任务，使得开发者能够更专注于实现业务逻辑而不是处理繁琐的 DOM 操作。通过学习和掌握 jQuery，可以大大提高前端开发效率。

资源推荐

资源详情

资源评论

jQuery总结：

1. 认识jQuery：

jQuery是javascript中的一个较轻量级的类库

js: document(dom)--->Jquery: $(document)(对象)

javascriptAPI和Jquery的API是不能通用的

2. javascript和jQuery:

$(document).ready(function(){});
类似于javascript中的window.onload=function(){}
区别：
js中的window.onload页面加载完毕只执行一个函数会默认的覆盖前面的函数
如果想要在页面加载完毕执行2个函数，可以把2个函数放在一个函数里调用，
当页面加载完成执行这个总函数

jQuery中的ready函数页面加载完毕会依次执行不会覆盖

3. jQuery中的ready函数简写形式：
简写形式一：
$(function(){});

简写形式二：
$().ready(function(){});

4. 使用jQuery需要在<head></head>里导入jQuery框架文件: