JQuery DOM操作 、属性和CSS样式操作、其他函数

时间：2023-11-18 13:03:26
DOM操作

1、在div1内部最后追加一个节点

$("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/>");

2、将一个节点插入到div1的内部最后

 $("<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+

相关文章