JQuery笔记

JQuery和JS入口函数的区别

获取dom元素

// 原生js window.onload = function () { console.log(document.querySelector("img")); }; //JQuery $(document).ready(function () { console.log($("img")[0]); });

获取图片width

// 原生js window.onload = function () { console.log(document.querySelector("img").width); }; // JQuery $(document).ready(function () { console.log($("img").width()); });

js可以获取到，JQuery获取不到

原生JS和JQuery入口元素的加载模式不同 原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行JQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行 // 原生js window.onload = function () { alert("1"); }; window.onload = function () { alert("2"); }; //弹2 // JQuery $(document).ready(function () { alert("3"); }); $(document).ready(function () { alert("4"); }); //弹3,4 原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的JQuery中编写多个入口函数，后面的不会覆盖前面的

JQuery入口函数多种写法

// 写法1 $(document).ready(function () { console.log("1"); }); // 写法2 jQuery(document).ready(function () { console.log("2"); }); // 写法3 $(function () { console.log("3"); }); // 写法4 jQuery(function () { console.log("4"); });

JQuery的核心函数

$(function () { // 接收一个函数 // 那不就是入口函数嘛，哈哈 // 接收一个字符串 console.log($("img")[0]); // 接收一个字符串选择器 console.log($("#box01")); // 接收一个字符串代码片段 console.log($("<p>我是段落</p>")); // 接收一个DOM元素 //会被包装成一个JQuery对象返回 var span = document.querySelector("span"); console.log($(span)); });

静态方法和实例方法

$(function () { function function01() { function01.staticMethod = function () { alert("static"); } // 静态方法调用 function01.staticMethod(); // 实例方法 function01.prototype.instanceMethod = function () { alert("instance"); } var a = new function01(); // 通过实例调用实例方法 a.instanceMethod(); });

静态方法each方法

$(function () { var arr = [1, 3, 5, 7, 9]; // 第一个参数：遍历到的元素 // 第二个参数：当前遍历到的索引 // 原生js只能遍历数组，不能遍历伪数组 arr.forEach(function (value, index) { console.log(value + ":" + index); }); // 第一个参数：当前遍历到的索引 // 第二个参数：遍历到的元素 // 可以遍历伪数组 $.each(arr, function (index, value) { console.log(value + ":" + index); }); });

map方法

$(function () { var arr = [1, 3, 5, 7, 9]; // 原生js的map方法遍历 // 第一个参数：当前遍历的元素 // 第二个参数：当前遍历到的索引 // 第三个参数：当前被遍历的数组 // 不能遍历伪数组 arr.map(function (value, index, array) { console.log(value, index, array); }); // 回调函数 // 第一个参数：要遍历的数组 // 第二个参数：没遍历一个元素之后执行的回调函数 // 可以遍历伪数组 $.map(arr, function (value, index) { console.log(value, index); }) });

JQuery的map和each区别？

each默认返回值就是遍历的对象

map默认返回值是空数组

each不支持在回调函数中对遍历的数组进行处理

map可以在回调函数的返回值中处理遍历的数组

其他静态方法

// 去除两边的空格 var str=" str "; console.log(str); var res=$.trim(str); console.log(res); // 判断是否为window对象 console.log($.isWindow(window)); // 判断是否为数组对象 console.log($.isArray(str));

静态方法holdReady

暂停入口函数

$.holdReady(true)

false：恢复入口函数

内容选择器

// 既没有子元素也没有文本内容的指定元素 console.log($("div:empty")); // 有文本内容或者有子元素的指定元素 console.log($("div:parent")); // 包含指定文本(div01)内容的指定元素 console.log($("div:contains('div01')")); // 包含指定子元素(span)的指定元素 console.log($("div:has('span')"));

属性和属性节点

原生JS

function Person() { } var person = new Person(); // 属性 person.name = "jack"; person["age"] = 12; console.log(person.name); console.log(person.age); // 设置属性节点 $(".div01")[0].setAttribute("name", "haha"); // 获取属性节点 console.log($(".div01")[0].getAttribute("name"));

JQuery

// attr() // 注意点： //一个参数是获取： 无论找到多少个元素，都只会返回第一个元素指定的属性节点的值 // 两个参数是设置：找到多少个元素就会设置多少个元素 // 设置属性节点 $(".div01").attr("name", "haha"); // 获取属性节点 console.log($(".div01").attr("name")); // removeAttr // 注意点： // 删除找到的所有指定元素的属性节点(name和class节点) $(".div01").removeAttr("name class");

prop和removeProp

// prop特点和attr一致 $("div").eq(1).prop("demo","haha"); console.log($("div").eq(1).prop("demo")); // removeProp和removeAttr一致 $("div").removeProp("demo"); console.log($("div").eq(1).prop("demo")); // prop能操作属性，还能操作属性节点 $("div").eq(1).prop("class","haha"); // prop和attr区别 console.log($("input").prop("checked"))//true or false console.log($("input").attr("checked"))//checked or undefined

操作类

<style> .red { background-color: red; } .border { border: 1px solid #000; } div { height: 100px; width: 100px; } </style> <script> $(function () { var btn01 = $("button")[0]; btn01.addEventListener("click", function () { // 添加类（red border） $("div").addClass("red border") }); var btn02 = $("button")[1]; btn02.addEventListener("click", function () { // 删除类（red border） $("div").removeClass("red border") }); var btn03 = $("button")[2]; btn03.addEventListener("click", function () { // 切换类（有就删除，没有就添加） $("div").toggleClass("red border") }); }); </script> </head> <body> <button>添加</button> <button>删除</button> <button>切换</button> <div></div> </body>

文本值

// 和原生的innerHtml一致 // 设置普通文本 $("div").eq(0).html("我是普通文本呀"); // 设置标签 $("div").eq(1).html("<p>我是p标签</p>"); // 获取标签 console.log($("div").eq(0).html()); console.log($("div").eq(1).html()); // 和原生的innerText一致 // 设置普通文本 $("div").eq(0).text("我是普通文本呀"); // 设置标签 $("div").eq(1).text("<p>我是p标签</p>"); // 设置输入框的输入值 $("input").eq(0).val("我是普通文本呀"); // 设置输入框的输入值 <p>我是p标签</p> $("input").eq(1).val("<p>我是p标签</p>"); // 获取输入框的输入值 console.log($("input").eq(1).val());

操作样式

// 设置样式 $("div").css({ width: "100px", height: "100px", backgroundColor: "red" }); // 获取样式 console.log($("div").css("width"));

位置

// 获取元素宽度 console.log($("div").eq(0).width()); // 左偏移量距离屏幕，可以设置offset({left:20px}) console.log($("div").eq(0).offset().left); // 左偏移量距离上一个定位元素，不能设置 console.log($("div").eq(0).position().left);

scroll滚动

window.addEventListener("scroll", function () { // 滚动偏移位 console.log($(window).scrollTop()); }); $("textarea")[0].addEventListener("scroll", function () { // 可以设置滚动偏移量 console.log($("textarea").scrollTop(100)); });

事件绑定

// 多个绑定事件都不会覆盖 $("button").eq(0).click(function(){ alert("click"); }); $("button").eq(0).mouseenter(function(){ alert("mouseenter"); }); // 多个绑定事件都不会覆盖 $("button").eq(0).on("click",function(){ alert("click"); }); $("button").eq(0).mouseenter(function(){ alert("mouseenter"); });

事件移除

function clickEvent(){ alert("click"); } function mouseenterEvent(){ alert("mouseenter"); } // 多个绑定事件都不会覆盖 $("button").eq(0).click(clickEvent); $("button").eq(0).mouseenter(mouseenterEvent); // 不传递参数，则解除所有事件 // $("button").off(); // 传递一个参数，解除指定类型的事件 $("button").off("mouseenter"); // 解除指定类型的指定事件 $("button").off("mouseenter",click);

事件冒泡和默认行为

$(".son").click(function (event) { alert("son"); // 阻止事件冒泡方法一 // return false; // 阻止事件冒泡方法二 event.stopPropagation(); }); $(".father").click(function () { alert("father"); }); $("a").click(function(event){ // 阻止默认行为方法一 // return false; // 阻止默认行为方法二 event.preventDefault(); })

事件自动触发

$(".father").click(function () { alert("father"); }); // 自动触发事件，触发冒泡，会触发默认行为 $(".father").trigger("click"); // 自动触发事件，不会触发冒泡，不会触发默认行为 $(".father").triggerHandler("click");

事件委托

// 事件委托：请别人帮忙办事，将结果反馈给我 $("button").click(function(){ $("ul").append("<li>n个小li</li>") }); $("ul").delegate("li","click",function(){ console.log($(this).html()); });

节点

添加

// 新建节点 var $li = $("<li></li>"); // 添加节点到最后 // $("ul").append($li); // $("ul").prepend($li); // 添加节点到最前面 // $li.appendTo($("ul")); // $li.prependTo($("ul")); // 添加节点到指定元素的后面 // $("ul").after($li); // $li.insertAfter($("ul")); // 添加节点到指定元素的前面 // $("ul").before($li); // $li.insertBefore($("ul"));

删除

// 删除指定元素 // $("li").eq(0).remove(); // $("li").remove(".choice"); // $("li").eq(0).detach(); // $("li").eq(0).detach(".choice"); // 删除指定元素的内容和元素 // $("li").eq(0).empty();

替换

var $span=$("<span></span>") // $("li").replaceWith($span); // $span.replaceAll($("li"));

复制

var $span = $("<span></span>"); // 浅复制：只会复制元素，不会复制事件 var shallow = $("li:first").clone(false); console.log(shallow); // 深复制：复制元素，会复制事件 var deep = $("li:first").clone(true); console.log(shallow);