DOM 操作
1, 在 div1 内部最后追加一个节点
$("#div1").append("<img src='../01-html 基本标签 / img/Male.gif'/>");
2, 将一个节点插入到 div1 的内部最后
1 $("<img src='../01-HTML 基本标签 / img/Female.gif'/>").appendTo("#div1")
3, 在 div1 内部前面追加一个节点
$("#div1").prepend("<img src='../01-HTML 基本标签 / img/Male.gif'/>");
4, 将一个节点插入到 div1 的内部最前面
$("<img src='../01-HTML 基本标签 / img/Female.gif'/>").prependTo("#div1");
5, 在 div1 外部前面插入一个节点
- $("#div2").before("<p > 一个 P 标签 </p>");
- $("<p > 标签 </p>").insertBefore("#div2");
6, 将一个节点插入到 div1 的外部最前面
- $("#div2").after("<p > 一个 P 标签 </p>");
- $("<p > 标签 </p>").insertAfter("#div2");
7, 为每一个选中的节点都套一层父节点
$("div").wrap("<section></section>");
8, 将选中的所有节点包裹在同一个父节点中
$("div ~ p").wrapAll("<section></section>");
9, 删除选中节点的父节点
$("div p").unwrap();
10, 将选中节点中的所有元素, 包裹在一个新的父节点中
新的节点是当前元素的唯一子节点
$("#div1").wrapInner("<div></div>");
11, 将所有选中节点替换成新的节点
- $("div p").replaceWith("<span>12</span>");
- $("<span>12</span>").replaceAll("div p");
12, 清空当前节点中的所有内容, 但会保留当前节点标签
$("#div1").empty();
13, 删除当前节点以及该节点的所有子节点
- $("#div1").remove();
- $("#div1").detach();
[remove 和 detach 的区别]
使用 remove 删除的节点, 恢复以后, 将不再保留节点所绑定的事件
使用 detach 删除的节点, 恢复以后, 可以保留节点所绑定的事件
14, [JS 中 cloneNode() 与 JQ 中 clone() 的区别]
cloneNode() 传入 false 或 不传, 不能可隆子节点
传入 true , 可以克隆子节点
clone() 无论传入 true 或 false 或 不传 , 都会克隆当前节点及其子节点
但是, 只有传入 true, 才可以克隆当前节点所绑定的事件, 否则不可隆事件
第二个参数传入 true 或 false 表示是否克隆子节点
- $("#div1").click(function(){
- alert("我是 div1");
- });
- $("#div1").clone(false,).insertBefore("button:eq(0)");
属性和 CSS 样式操作
1, 设置节点属性
$("#div1").attr("class","cls1");
2, 传入对象, 以键值对的形式同时设置多个属性
- $("#div1").attr({
- "class":"cls",
- "name":"name1",
- "font-size":"24px"
- });
3, 删除节点属性
console.log($("#div1").attr("id"));
prop 和 attr 一样, 都可以对节点属性进行读取和设置.
[两者的不同]
在读取属性 ="属性值" 时, attr 返回的是 属性值 或 undefined;
prop 返回的是 true / false
- console.log($("#div1").attr("disabled"));
- console.log($("input").prop("checked"));
4,>>> 在原有 class 基础上新增一个 class 名字
console.log($("#div1").addClass("cla"));
>>> 删除指定的 class 名称, 其余的 class 名依然保留
console.log($("#div1").removeClass("cls cla"));
>>> 切换 class, 如果有指定 class 就删除, 如果没有就新增
- $("button:eq(0)").click(function(){
- $("#div1").toggleClass("div1")
- });
5,.html() 取到或设置节点中的 html 代码
.text() 取到或设置节点中的文本
.val() 取到或设置表单中的 value 值
- $("#div1").html("<span>123</span>");
- $("#div1").text("<p>567</p>");
- $("input:eq(0)").val("<p > 值 </p>");
6,>>>css() 给节点添加 css 样式, 属于行级样式表权限
$("#div1").css("color","goldenrod");
>>> 同时给一个节点添加多个 css 样式
- $("#div1").mousedown(function(){
- "class" : "clc",
- "color" : "goldenrod",
- // "font-size" : "24px"
- // 通过回调函数设置样式
- "font-size":function(index,value){
- var n=parseInt(value)+1;
- return n+"px";
- }
- });
7,>>> 取到或者设置节点的宽, 高
- $("#div1").width(400);
- $("#div1").width("400px");
>>> 取到节点的宽, 高 + padding. 不含 border 和 margin
- console.log( $("#div1").innerWidth());
- console.log( $("#div1").innerHeight());
>>> 不传参数表示: 宽高 + padding+border
>>> 传入 true 表示: 宽高 + padding+border+margin
- console.log( $("#div1").outerWidth());
- console.log( $("#div1").outerHeight(true));
8, 返回一个节点, 相对于浏览器的左上角的偏移量
* 返回一个对象 {top:20,left:20}
- */
- console.log( $("#div1").offset());
9, 返回一个节点, 相对于父容器的偏移量.
注意:
使用此方法, 要求父元素必须是定位元素. 如果父元素不是定位元素,
则依然是相对于浏览器左上角进行测量
此方法, 测量偏移量时, 将不考虑 margin. 而会将 margin 视为当前容器的一部分.
console.log( $("#div1").position());
10, 设置或取到指定节点的滚动条的位置
console.log( $("#div1").scrollTop(200).scrollTop());
其他函数
1,each() 用于遍历 JQuery 中的对象数组.
在回调函数中, return true; 相当于 continue;
return false; 相当于 break;
- $("#ul1 li").each(function(index,item){
- if(index%2!=0){
- return true;
- }
- console.log(index);
- console.log($(item).text());
在回调函数中, this 指向调用当前函数的节点对象
this,item 是 JS 对象, 在 JQuery 使用时要用 $ 包裹
- console.log($(this)); //console.log(item);
- $(this).text($(this).text()+"aaa");
2, .size() .length 返回所查询的数组中元素的个数
console.log($("#ul1 li").size());
3, .get() 将 JQuery 对象转成 JS 对象, 传入 index 表示取出第几个, 并转成 JS 对象
不传参数, 表示将数组中的所有元素转为 JS 对象
console.log($("#ul1 li").get(0));
4, 对传入的数组或对象进行遍历. 可以是 JQuery 对象数组, 也可以是 JS 数组或对象 [常用]
- var arr=[1,2,3,4];
- var obj={
- name:"zhangsan",
- age:24,
- sex:"nan"
- };
- $.each($("li"), function(index,item) {
- console.log(index+"----"+item);
- console.log(item)
- });
5, 数组映射
- var newArr=$.map(arr, function(item,index) {
- return item+5;
- });
- console.log(newArr);
6,$.inArray(): 检测一个值是否在数组中, 返回下标. 如果没有找到返回 - 1.
第三个参数表示查找的起始下标.
- var arr = [1,2,3,4];
- var is=$.inArray(2,arr,2);// 相当于 arr.indexOf(2,2);
7, 将选中的 JQuery DOM 集合, 恢复成数组. 数组的每一个元素是 JS 对象
console.log($("#ul1 li").toArray());
8,merge: 合并两个数组
- var arr=$.merge([1,2,3],[4,5,6]);
- console.log(arr);
9, 将一个 JSON 字符串转换成 JSON 对象
- var str='{"1":"zhan","2":"wanggang","3":"lizhn"}';
- console.log(str);
- console.log($.parseJSON(str));
10, 检测一个节点, 是否包含另一个节点
接收两个 JS 对象, 第一个是父对象, 第二个是子对象
console.log($.contains($("#ul1")[0],$("#li")[0]));
11,hasClass() 检测一个节点是否有指定的 class 名
console.log($("#ul1").hasClass("clas"));
12, [各种检测函数]
- $.contains(c,c)
- $.type(obj)
- $.isarray(obj)$.isFunction(obj)
- $.isEmptyObject(obj)
- $.isPlainObject(obj)
- $.isWindow(obj)
- $.isNumeric(value)1.7+
来源: https://www.cnblogs.com/lyz-999/p/8999694.html