js jQuery各种API、dom节点的操作、插件相关概念及应用

各种API

属性的读写

        写：jqDOM.attr(" 属性",属性值)
                jqDOM.attr({key:val,key,val})

        读：jqDOM.attr("属性")

$("div").attr("class", "haha")

$("div").attr({
		a:222,
		b:333
	})


console.log($("div").attr("class"));

注意：对于input的checked属性如何判断

        $("input").attr("checked")读出来的结果为checked
        $("input").prop("checked")读出来的是布尔值

if ($("input").attr("checked") == "checked") {
		console.log("可以注册")
	}


if ($("input").prop("checked") == true) {
		console.log("可以注册")
	}

css样式的读写

        写：jqDOM.css({key:val,key1:val})

        读：jqDOM.css("属性")
               jqDOM.css([“属性”，“属性”])

$("div").css({
		width:200,
		height:300,
		backgroundColor:"red"
	})
console.log($("div").css("width"))
console.log($("div").css(["width","backgroundColor"]))

offset相关

        写：jqDOM.width(n)
               jqDOM.height(n)
               jqDOM.offset({left:n,top:n})---------自带定位属性

        读：jqDOM.width()
               jqDOM.height()
               jqDOM.offset().left
               jqDOM.offset().top

	$("div").width(500);
	$("div").height(200);

    $("div").offset({
		left:200
	})
	console.log($("div").width());
    console.log($("div").offset().left)

---

滚动条事件

window.onscroll=function(){
		console.log($(window).scrollTop())
	}



	$("button").offset({
		top:1000
	}).click(function() {
		$(window).scrollTop(0)
	})

---

DOM节点的操作

新建

        $("<标签>")

	let xdiv=$("<div>");
	xdiv.html("哈哈哈哈嘿嘿嘿");
	$("body").append(xdiv);

    let xxdiv=$("<div>我一脚一个大马猴</div>");
	$("body").append(xxdiv)

追加

        尾插append()

$("ul").append(oLi);
oLi.appendTo($("ul"));

        头插prepend()

$("ul").prepend(oLi);
oLi.prependTo($("ul"));

        插入至参照节点之前before()

$("li").eq(1).before(oLi);
 oLi.insertBefore($("li").eq(1));

        插入至参照节点之后after()

$("li").eq(1).after(oLi);
oLi.insertAfter($("li").eq(1));

删除

        jqDOM.remove()        删除当前节点

        jqDOM.empty()        删除当前节点里面的所有内容

 $("li").eq(1).remove();
 $("li").eq(1).empty();

---

插件

        作用：给jquery拓展新功能

$.fun = function() {
		console.log("heihei")
	}
	$.fun()



$.extend({
		fun1: function(name) {
			console.log(name + " fun1")
		},
		fun2: function(name) {
			console.log(name + "fun2")
		}
	})
	$.fun1("yhc")

$.fn.extend({
		changeStyle: function(w, h, color) {
			$(this).css({
				width: w,
				height: h,
				backgroundColor: color;
			});
		}
	});

	$("div").changeStyle(100, 200, "hotpink");

注：$.fn.extend拓展的是jQuery对象（原型的）的方法

第三方cookie插件

        增改：$.cookie(key,value)        会话周期

                   $.cookie(key,value,{expirse:7})        长生命周期

        读       $.cookie(key)

        删       $.cookie(key,null,-1)