JQuery学习-1

JQuery学习-1一个快速的、小型的的JavaScript库处理一些重复的代码以及帮助处理浏览器的兼容问题。同时jQuery也是一个过时的库。引入jQuery下载网址https://jquery.com/download/版本选择如果要兼容IE6\7\8版本则使用1一般情况下使用3即可相对方法多性能较好。在标签页使用引入可以需要单独一行基础使用所有操作都在html的基础进行。$ 是jQuery中的核心函数jQuery为我们提供了多个工具方法。jQuery中的所有功能都是通过$来进行的。下面这段js中helloworld会$ hello world先执行这是因为$的核心函数相当document.addEventListener(“DOMContentLoaded”, function(){})console.log($)$(function(){console.log($hello world)})console.log(hello world)选择器使用将选择器字符串作为参数jQuery会自动去网页中查找元素,类似于document.querySelectorAll()。button idbtn点击我/buttonscript$(function(){$(#btn).click(function(){alert(hello world)})})/script通过原生的方法获取的对象是和通过jQuery获取的方法对象是不一样的。jQuery为我们提供了很多方法但是不能调用原生的对象。在命名方面为了区分他们jQuery对象命名前面通常加符号。可以将html代码作为参数根据html来创建元素。在添加对象这里点击只能添加一次符号。可以将html代码作为参数根据html来创建元素。在添加对象这里点击只能添加一次符号。可以将html代码作为参数根据html来创建元素。在添加对象这里点击只能添加一次h1对应的是同一个Dom元素实例第一次append时已经插入到div中后续再调用append知识把这个已存在的元素移动到目标未知不会创建一个新元素。如果要实现添加可以在append前新建一个元素。div/divbutton idbtn点击我/button$(function(){varbtn1document.getElementById(btn)alert(btn1)//[object HTMLButtonElement]var$btn2$(btn)alert($btn2)//[object Object]// var $h1 $(h1hello world/h1)alert($h1)//[object Object]$btn2.click(function(){var$h1$(h1hello world/h1)$(div).append($h1)})})jQuery对象使用!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlescriptsrcjquery-3.7.1.min.js/script/headbodybuttonidbtn添加/buttonulli111/lili222/lili333/lili444/lili444/li/ulscript/** * 通过jQuery核心函数获取的对象就是jQuery对象 * 可以将其理解为DOmM对象的升级版可以简化DOM对象 */$(function(){$(#btn).click(function(){var$li$(li)console.log($li.length);// 取内容console.log($li[0].textContent);// 修改某一个内容$li[0].textContent修改后的内容// 遍历所有的li$li.each(function(index,item){console.log(index,item.textContent);})// 返回的是jQuery对象自己letresult$li.text(你好)console.log(result);//修改cssresult.css(color,red)})})/script/body/html常用操作方法addClass()回调函数会为每个匹配的元素执行一次你4个.box1所以执行4次回调函数参数index当前元素在匹配集合中的索引l 从 0 开始0/1/2/3;className当前元素已有的类名字符串初始是box1;回调函数返回值要添加的类名返回啥就加啥;·函数内 this指向当前遍历的 DOM 元素原生 DOM$(this转为jQuery 对象。!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box1{width:100px;height:100px;background-color:pink;}.box2{border:10px solid red;}.box3{width:100px;height:100px;background-color:rgb(35,222,191);}/stylescript srcjquery-3.7.1.min.js/script/headbodybutton idbtnadd/buttonbutton idremove_btnremove/buttonbrdivclassbox1/divdivclassbox1/divdivclassbox1/divdivclassbox1/div/bodyscript$(function(){$(#btn).click(function(){// 添加类名$(.box1).addClass(function(index,className){console.log(index,className)//这里会执行四次// 再回调函数中this表示的是当前元素,如果要转化的话可以使用$(this)console.log(this);if(index%20){returnbox2}else{returnbox3}})})})/script/htmlremoveClass()这里可以移除匹配元素的指定类名和删除所有类名$(#remove_btn).click(function(){$(.box1).removeClass(box2)})$(#remove_all).click(function(){$(.box1).removeClass()})toggleClass()如果元素有该类名则1一处没有则添加类似开关。$(#toggle).click(function(){$(.box1).toggleClass(box3)})// 带参数控制$(#toggle).click(function(){// 当参数为true时添加类名// 当参数为false时移除类名$(.box1).toggleClass(box3,true)})removeClass()检查匹配的元素中是否有至少一个包含指定类名返回布尔值true/false。$(#has_class).click(function(){// 判断是否有某个类名// 返回的是一个布尔值console.log($(.box1).hasClass(box3));})jQuery对象复制jQuery提供一个clone()的方法用来复制jQeury对象。!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/title/headbodybuttonidbtn复制/buttonulidlistli刘备/lili关羽/lili张飞/li/ululidnewListli曹操/li/ul/bodyscriptsrcjquery-3.7.1.min.js/scriptscript$(function(){var$swk$(#list li:nth-child(2));var$newList$(#newList);$(#btn).click(function(){$newList.append($swk.clone());})})/script/html添加容器!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlescriptsrcjquery-3.7.1.min.js/scriptstyle#box1{width:300px;height:100px;background-color:pink;margin:0 auto;}#box2{width:200px;height:200px;background-color:red;margin:0 auto;}/stylescript$(function(){// unwarp() 方法可以移除元素的父元素// wrap() 方法可以包裹元素// wrapall() 方法可以包裹所有元素// append() 方法可以在元素的末尾添加内容// prepend() 方法可以在元素的开头添加内容// appendTo() 方法可以在元素的末尾添加内容$(#del).click(function(){$(#wei li).unwrap();// 这里一处了li的父元素ul将其移除到div中})$(#add).click(function(){$(#caocao).wrap(ul id wei);// 这里一处了li的父元素ul将其包裹在新的ul中})$(#addAll).click(function(){$(li).wrapAll(div);// 这里一处了li的父元素ul将其包裹在新的div中})$(#append).click(function(){$(#box2).append(div id box1/div);// 这里一处了li的父元素ul将其添加到div2中内容中})$(#prepend).click(function(){$(div id box1/div).prependTo(#box2);// 这里一处了li的父元素ul将其添加到div2中内容中})$(#appendTo).click(function(){$(div id box1/div).appendTo(#box2);// 这里一处了li的父元素ul将其添加到div2中内容中})})/script/headbodybuttoniddel删除容器/buttonbuttonidadd添加容器/buttonbuttonidaddAll添加所有所有容器/buttonbuttonidappend添加到div2中/buttonbuttonidprepend添加到开头到div2开头中/buttonhrdivulidweiliidcaocao曹操/li/ul/divulidshuli刘备/lili关羽/lili张飞/li/uldividbox2/div/body/html