jquery 笔记(自己学习jquery整理好的)

### jQuery基础知识概览 #### 一、隔行变色的表格实现 在Web开发中，为了提高用户体验，经常需要对表格进行美化处理，比如让表格的每一行隔行变色。这种方式不仅美观，还能帮助用户更容易地阅读和理解数据。 **原始JavaScript实现：** ```javascript window.onload = function() { var otable = document.getElementById('oTable'); for (var i = 0; i < otable.rows.length; i++) { if (i % 2 == 0) otable.rows[i].className = 'alrow'; } }; ``` **使用jQuery优化后的实现：** ```javascript $(function() { $(table.datalist tr:even).addClass("a"); }); ``` **分析：** - **原始实现：** 使用了传统的JavaScript DOM操作方法，通过`getElementById`获取表格元素，并遍历所有行来设置类名。 - **jQuery实现：** 使用jQuery简化了代码，利用`:even`伪类选择器来选取偶数行，并添加类名。 #### 二、功能函数前缀 jQuery提供了一系列的功能函数，这些函数往往以`$`符号开头，便于识别和调用。 **示例：** `$.trim()` **功能：** 去除字符串两端的空白字符。 **使用场景：** - 在处理表单输入时，去除用户输入的前后空格，确保数据的一致性和准确性。 **示例代码：** ```javascript var trimmedText = $.trim($('#inputField').val()); ``` #### 三、属性选择器 jQuery提供了强大的选择器机制，可以非常灵活地选取页面中的元素。 **示例：** `$("ul li ul li:has(a)").addClass("myClass");` **功能：** 选取所有包含`<a>`标签的`<li>`子元素，并为其添加一个名为`myClass`的类。 **分析：** - `:has()`选择器用于选取包含指定子元素的元素。 **示例代码：** ```javascript $("ul li ul li:has(a)").addClass("myClass"); ``` #### 四、位置选择器 位置选择器允许根据元素在文档中的位置来选取元素。 **示例：** `$("p:lt(2)").addClass("myClass");` **功能：** 选取所有`<p>`标签中索引小于2的元素，并为它们添加名为`myClass`的类。 **分析：** - `:lt()`选择器选取索引小于指定值的所有元素。 **示例代码：** ```javascript $("p:lt(2)").addClass("myClass"); ``` #### 五、DOM操作 jQuery极大地简化了DOM操作的过程，使得开发者能够轻松地创建、读取、更新和删除DOM元素。 **创建DOM元素：** ```javascript var oNew = $("<p>aaaaa</p>"); oNew.insertAfter("#myID"); ``` **分析：** - 使用`$()`创建新的DOM元素。 - 使用`insertAfter()`将新元素插入到指定元素之后。 **获取属性值：** ```javascript var sTitle = $("p:eq(1)").attr("title"); // 获取第二个<p>元素的title属性值 $("span").text(sTitle); // 将该值赋给span元素 ``` **分析：** - `:eq(index)`选择器选取索引为index的元素。 - `attr(name)`获取或设置元素的属性值。 **绑定事件处理程序：** ```javascript $("p").click(function () { // 当点击p元素时触发 $(this).toggleClass("myClass"); // 切换当前元素的myClass类 }); ``` **分析：** - `click()`绑定点击事件处理程序。 - `toggleClass()`切换元素的类名。 #### 六、CSS样式操作 jQuery提供了方便的方法来操作CSS样式。 **添加多个类名：** ```javascript $("div").addClass("myClass1 myClass2"); ``` **分析：** - `addClass()`同时为元素添加多个类名。 **隐藏与显示元素：** ```javascript $("input:first").click(function () { $("p").hide(); // 隐藏所有p元素 }); $("input:last").click(function () { $("p").show(); // 显示所有p元素 }); ``` **分析：** - `hide()`和`show()`分别用于隐藏和显示元素。 #### 七、动画效果 jQuery还支持简单的动画效果，可以通过链式调用来实现复杂的动画组合。 **淡入淡出效果：** ```javascript $("input:eq(0)").click(function () { $("img").fadeOut(3000); // 淡出图片元素 }); $("input:eq(1)").click(function () { $("img").fadeIn(1000); // 淡入图片元素 }); ``` **分析：** - `fadeOut()`和`fadeIn()`分别用于淡出和淡入元素。 **滑动效果：** ```javascript $("input:eq(0)").click(function () { $("img").slideUp(1000); // 向上滑动图片元素 }); $("input:eq(1)").click(function () { $("img").slideDown(1000); // 向下滑动图片元素 }); ``` **分析：** - `slideUp()`和`slideDown()`分别用于向上和向下滑动元素。 #### 八、浏览器兼容性检测 jQuery提供了内置的检测方法来判断浏览器类型及其版本，这对于跨浏览器的开发非常重要。 **示例：** 检测是否为W3C标准浏览器 ```javascript var sBox = $.boxModel ? "W3C" : "IE"; ``` **分析：** - `$.boxModel`为真则表示浏览器遵循W3C标准。 **示例：** 检测浏览器类型及版本 ```javascript var sBrowserInfo = $.browser.msie ? "Internet Explorer" : $.browser.mozilla ? "Mozilla Firefox" : $.browser.safari ? "Safari" : $.browser.opera ? "Opera" : "Unknown"; ``` **分析：** - `$.browser`对象包含了浏览器类型的信息。 #### 九、循环数组和对象 jQuery提供了`.each()`方法来遍历数组和对象。 **示例：** 遍历数组并弹出每个元素 ```javascript var aArray = ["one", "two", "three"]; $.each(aArray, function(iNum, value) { alert(value); }); ``` **分析：** - `.each()`方法接收两个参数：当前索引和对应的值。 - 使用此方法可以轻松地处理数组中的每一项。 以上是关于jQuery的一些基础知识点和示例代码，通过这些知识点的学习，可以帮助开发者更高效地进行Web前端开发工作。