（自用）Java学习-4.14（jQuery）

1. jQuery的DOM操作

(一) 属性操作

• attr()：获取或设置HTML元素的属性。

  • attr("属性名") 获取属性的值。

  • attr("属性名", 属性值) 设置属性的值。

• prop()：与 attr() 类似，但更加适合操作某些属性（如checked、selected等）。

  • prop("属性名") 获取属性的值。

  • prop("属性名", 属性值) 设置属性的值。

  建议使用 prop() 方法，因为 attr() 在某些浏览器中会失效，prop() 在所有浏览器中都能稳定工作。

  // 全选功能 $("input[type='checkbox']").prop('checked', true);

(二) class类操作

• addClass()：为元素添加指定的类。

• removeClass()：移除元素的指定类。

  $("tr:first").addClass("highlight");

(三) 内容操作

• html()：获取或设置元素的HTML内容。

• text()：获取或设置元素的文本内容。

• val()：获取或设置表单元素（如输入框、下拉框）的值。

  $("#name").val('新的值');

(四) 样式操作

• css()：获取或设置元素的CSS样式。

  • css("属性名") 获取指定样式的值。

  • css("属性名", "值") 设置样式。

  • css({"属性名": "值", ...}) 批量设置样式。

  $("#p").css("font-size", "20px");

(五) 文档操作

• append()：在元素内的最后插入内容。

• prepend()：在元素内的最前插入内容。

• insertBefore()：在指定元素前插入内容。

• insertAfter()：在指定元素后插入内容。

  $("ul").append("<li>新项</li>");

• empty()：清空元素的内容。

• remove()：删除元素。

  $("ul").empty(); $("ul li:eq(2)").remove();

2. jQuery的事件

• 通过 jQuery 提供的 事件方法，可以为DOM元素绑定各种事件，如 click、hover、keyup 等。

  $("#bt1").click(function(){ $("ul li:eq(2)").remove(); });

3. jQuery动画

• jQuery提供了多种动画效果，能帮助开发者轻松地实现元素的显示、隐藏、淡入淡出、滑动等效果。

  • show()：显示元素。

  • hide()：隐藏元素。

  • fadeIn()：淡入显示元素。

  • fadeOut()：淡出隐藏元素。

  • slideUp()：向上滑动隐藏元素。

  • slideDown()：向下滑动显示元素。

  $("#im").fadeIn(3000); // 3秒内淡入显示图片

4. 数组操作

• $.each()：用于遍历数组或对象。它可以用于遍历DOM元素、数组等，简化了原生JavaScript中的循环代码。

  var arr = ["北京", "上海", "广州"]; $.each(arr, function(i, val){ console.log(i, val); });

• 动态加载省市数据：通过 $.each() 动态填充省份和城市的下拉框，实现动态数据绑定。

  var pros = ["山西省", "陕西省", "山东省"]; $(pros).each(function(i, dom){ $("#pro").append("<option value='" + i + "'>" + dom + "</option>"); });

5. 其他重要概念

• HTML与CSS：HTML（超文本标记语言）用于定义网页的结构，而CSS（层叠样式表）用于设置网页的样式。CSS的优先级遵循就近原则：行内样式 > 内部样式 > 外部样式。

• 盒子模型：盒子模型描述了网页元素的布局结构，包括 content、padding、border 和 margin。理解盒子模型有助于我们准确地控制网页布局。

• JavaScript（JS）：JavaScript 是一种基于事件驱动的脚本语言，用于网页交互。ECMAScript 是 JavaScript 的标准，包含了对象（如 String、Array、Date）和方法（如正则表达式等）。DOM（文档对象模型）是 JavaScript 中与HTML和XML文档交互的标准接口。

• BOM（浏览器对象模型）：BOM 提供了与浏览器相关的功能，如操作浏览器历史记录、屏幕尺寸等。常见的对象有 Window、History、Location。

• jQuery的优势：jQuery 提供了简洁的语法，封装了JavaScript中常见的操作，避免了浏览器兼容性问题，大大简化了DOM操作、事件处理和动画效果的实现。