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

内容预览:
  • 【两者的不同】 在读取属性=“属性值”时,attr返回的是 属性值 或 undefi...~
  • console.log( $("#div1").position());   10、设置或取到指定节点...~
  • 在回调函数中,return true; 相当于continue; return false;相当于break...~

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样式

 1 $("#div1").mousedown(function(){
2 "class" : "clc",
3 "color" : "goldenrod",
4 // "font-size" : "24px"
5
6 // 通过回调函数设置样式
7 "font-size":function(index,value){
8 var n=parseInt(value)+1;
9 return n+"px";
10 }
11 });

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、返回一个节点,相对于浏览器的左上角的偏移量
* 返回一个对象
*/

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+

以上就是:JQuery DOM操作 、属性和CSS样式操作、其他函数 的全部内容。

本站部分内容来源于互联网和用户投稿,如有侵权请联系我们删除,谢谢。
Email:[email protected]


系统运维
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论