1. Append a node at the end inside div1
$("#div1").append("<img src='../01-HTML basic tag/img/Male.gif'/>");
2. Insert a node into the inner last of div1
1 $("<img src='../01-HTML basic tag/img/Female.gif'/>").appendTo("#div1")
3. Append a node in front of div1
$("#div1").prepend("<img src='../01-HTML basic tag/img/Male.gif'/>");
4. Insert a node into the inner front of div1
$("<img src='../01-HTML basic tag/img/Female.gif'/>").prependTo("#div1");
5. Insert a node in front of div1
$("#div2").before("<p>a P tag</p>" );
$("<p>标签</p>").insertBefore("#div2");
6. Insert a node to the outer front of div1
$("#div2").after("<p>a P tag</p>" );
$("<p>标签</p>").insertAfter("#div2");
7. Set a layer of parent nodes for each selected node
$("div").wrap("<section></section>");
8. Wrap all selected nodes in the same parent node
$("div ~ p").wrapAll("<section></section>");
9. Delete the parent node of the selected node
$("div p").unwrap();
10. Wrap all elements in the selected node in a new parent node. The
new node is the only child node of the current element
$("#div1").wrapInner("<div></div>");
11. Replace all selected nodes with new nodes
$("div p").replaceWith("<span>12</span>");
$("<span>12</span>").replaceAll("div p");
12. Clear all the content in the current node, but keep the current node label
$("#div1").empty();
13. Delete the current node and all child nodes of the node
$("#div1").remove();
$("#div1").detach();
[Difference between remove and detach]
The node deleted by remove will no longer retain the event bound to
the node after recovery. The node deleted by detach can be retained after recovery.
14. [cloneNode( in JS ) and the difference between clone() in JQ]
① cloneNode() passes in false or no pass, cannot clone child nodes
pass in true, can clone child nodes
② clone() No matter whether true or false or no pass is passed in, it will clone the current Node and its child nodes
However, only when true is passed in, the event bound to the current node can be cloned, otherwise the
second parameter of the non-robust event is passed in true or false to indicate whether to clone the child node
$("#div1").click(function(){
alert( "I am div1" );
});
$("#div1").clone(false,).insertBefore("button:eq(0)");
1. Set the node properties
$("#div1").attr("class","cls1");
2. Pass in an object and set multiple properties at the same time in the form of key-value pairs
$("#div1").attr({
"class":"cls",
"name":"name1",
"font-size":"24px"
});
3. Delete node attributes
console.log($("#div1").attr("id"));
Like attr, prop can read and set node attributes.
[The difference between the two]
When reading attribute="attribute value", attr returns the attribute value or undefined;
prop returns true/false
console.log($("#div1").attr("disabled"));
console.log($("input").prop("checked"));
4. >>> Add a class name based on the original class
console.log($("#div1").addClass("cla"));
>>> Delete the specified class name, the rest of the class names remain
console.log($("#div1").removeClass("cls cla"));
>>> switch class, if there is a specified class, delete it, if not, add it
$("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、返回一个节点，相对于浏览器的左上角的偏移量
* 返回一个对象{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+