JQuery常用知识点

Jquery知识点：

jQuery定义：jQuery 就是一个简单高效的 js 库

jq 封装的 是 js dom 的 部分

不需要考虑兼容问题

带 min ： 压缩版本 删除了注释 换行 提高网页加载效率 上线使用

不带 min ： 无压缩

 

1.多库共存

在多个js库应用于同一个项目中时， $ 符 会存在冲突的情况 为了防止这种现在发生，

var jq = jQuery.noConflict(); // 此时 jq 就代替了 $ 以后所有的jquery操作 都用 jq

2. jq 和 原生 的 转换

// 原生 dom 对象

var oAll = document.getElementById("all");

console.log(oAll);

// jq对象

var the = $("#all");

var $theAll = $("#all");

console.log(the);

console.log($theAll);

// 原生 --> jq

console.log($(oAll));

// jq --> 原生

console.log($theAll[0]);

3. jquery选择器

// 1. id

var $theStars = $("#boys");

console.log($theStars);

// 2. 标签

// $("li").html("张艺兴");

// 3. 选择类名是 boyA 的 li 标签 吴PW

// $("li.boyA").html("wu pw")

// 4.通用

$("*").css("color", "rosybrown");

// 5.群组

$("ul,div").css("fontSize", "30px");

// 6.后代

$("#boys2 li").html("2222");

// 7.子代

$(".bb>p").css("color", "red");

// 8.兄弟选择器

// $("#b2+li").css("color", "red");

// $("#b2~li").css("color", "yellow");

// 9. 属性选择器

// $("li[class=boyA]").html("鹿 NP");

// 10. 伪类选择器

$("tr:first").html("111");

$("tr:last").html("999");

// 偶数 索引值 0 2 4 第一个 三个 五个

$("table tr:even").css("background-color","red");

// 取索引值 第三个为黄色

$("#boys li:odd").css("background-color", "yellow");

4. 设置属性

// 1. 操作属性节点 attr

$("#g2").attr("class", "gun mm")

$("img").attr({

src:'img/1.jpg',

alt:'图片没有了'

})

// 2. 删除属性 removeAttr

$("#g2").removeAttr("class");

 

// 3. prop 用于 checked disabled 等需要返回 boolean 类型的属性

$("input").click(function(){

var str = $(this).attr("checked");

console.log(str); // checked

var str2 = $(this).prop("checked");

console.log(str2); // true

})

 

// 添加类名

$("#all").addClass("div1");

// 删除类名

$("#all").removeClass("div1");

// toggle

$("#all").click(function(){

$("all").toggleClass("div1");

})

 

// 查看某个元素是否含有这个class

console.log($("#all").hasClass("div1"));

 

5. append <==> appendTo 在a后面添加b <===> 把b添加到a后面

// 1. append = appendChild

$("#g1").append("<p>陈钰琪</p>")

// 2. 把邓超填到每个 li 的尾部

// $("<del>邓超</del>").appendTo($("li"));

$("li").append("<del>邓超</del>");

 

prepend <==> prependTo 在a前面添加b <===> 把b添加到a前面

// // 3. prepend 向头部添加

// $("#g1").prepend("<ins>高圆圆</ins>")

//

// // 4. prependTo

// $("<mark>范BB</mark>").prependTo($("li"))

 

6. wrap 和 unwrap 的区别 ：

wrap ： $(".gg").wrap("<div>hahahhahah</div>") 用div 把 gg 包裹起来

unewrap： $(".gg").unwrap(); 删除 包裹他的父节点

 

7. 点 replaceWith（） 替换节点

点 replaceAll （） 替代所有

点 empty（） 清空 相当于 innerHTML = "";

点 remove（）