前端开发JS框架之jQuery的基础知识分享

　　jQuery对象
　　jQuery对象是通过jQuery包装DOM对象后产生的对象
　　注意：jQuery对象只能使用jQuery里的方法，DOM对象只能使用DOM对象的方法jQuery基础知识点查找标签
　　基本选择器id选择器：（id）标签选择器：（tagName）class选择器：（。className）配合使用：（p。c1）找到有c1的p标签所有元素选择器：（）组合选择器：（id，。className，tagName）
　　层级选择器：（pspan）；p标签下所有后代span标签（子标签，子子标签。。。）（psapn）；p标签下所有儿子span标签（pspan）；紧挨着p标签的第一span元素（pspan）；p标签下所有兄弟元素span。
　　基本筛选器：：first第一个：last最后一个：eq（index）索引等于index的那个元素：even匹配所有索引值为偶数的元素，从0开始计数：odd匹配所有索引值为奇数的元素，从0开始计数：gt（index）匹配所有大于给定索引值的元素：lt（index）匹配所有小于给定索引值的元素：not（元素选择器）移除所有满足not条件的标签：has（元素选择器）选取所有包含一个或多个标签在其内的标签（指的是从后代元素找）例子（ulli：first）S。fn。init〔li，prevObject：S。fn。init（1）〕（ulli：gt（3））S。fn。init（6）〔li，lil1，li，li。cl1，li，li，prevObject：S。fn。init（1）〕（ulli：has（l1））S。fn。init〔prevObject：S。fn。init（1）〕length：0prevObject：S。fn。init〔document〕proto：Object（0）（ulli：not（。cl1））S。fn。init（9）〔li，li，li，li，li，lil1，li，li，li，prevObject：S。fn。init（1）〕（ulli：odd）S。fn。init（5）〔li，li，lil1，li。cl1，li，prevObject：S。fn
　　属性选择器：〔属性】〔属性名value〕〔属性！value〕例子（〔username〕）S。fn。init（2）〔input，input，prevObject：S。fn。init（1）〕（〔usernamehello〕）S。fn。init〔input，prevObject：S。fn。init（1）〕
　　表单筛选器：：text：password：file：radio：checkbox：submit：reset：button例子：（：checkbox）找到所有的checkbox表单对象属性：：enabled：disabled：checked：selected例子（input：enabled）找到可用的input标签（：selected）找到所有被选中的option（：checked）会将checked和selected都拿到，一般使用的时候会加个限制条件，如：（input：selected）找到被选中的input标签
　　筛选器方法：下一个元素：（id）。next（）（id）。nextAll（）（id）。nextUntil（d1）寻找下一个元素，直到d1位置为止，不包括d1标签上一个元素（id）。prev（）（id）。prevAll（）（id）。prevUntil（i2）寻找上一个元素，直到d1位置为止，不包括d1标签父元素（id）。parent（）（id）。parents（）查找当前元素的所有的父辈元素（id）。parentsUntil（。c1）查找当前元素的所有的父辈元素，直到遇到匹配的。c1元素为止。不包括。c1元素儿子和兄弟元素（id）。children（）；儿子（id）。siblings（）；兄弟
　　jQuery的一些方法：（p）。find（p）查找p标签下的p标签等价于（pp）（p）。filter（。c1）查找含有c1样式类的p标签。等价于（p。c1）（p）。first（）（p）。last（）（p）。not（）（p）。has（）（p）。eq（）
　　标签操作样式操作jQueryjsaddClass（）；classList。add（）removeClass（）；classList。remove（）hasClass（）；判断样式是否存在classList。contains（）toggleClass（）；有则删去，无则添加classList。toggle（）例子（d1）。toggleClass（c1）S。fn。init〔pd1。c2〕（d1）。addClass（c1）S。fn。init〔pd1。c2。c1〕（d1）。toggleClass（c2）S。fn。init〔pd1。c1〕位置操作offset（）获取匹配元素在当前窗口的相对偏移或这种元素位置position（）获取匹配元素相对父元素的偏移scrollTop（）获取匹配元素相对滚动条顶部的偏移scrollLeft（）获取匹配元素相对滚动条左侧的偏移尺寸：height（）高度widght（）宽度innerHeight（）innerWidth（）outerHeght（）outerWidth（）
　　文本操作jQueryjstext（）innerText（）html（）innerHtml（）例子（p）。text（）获取标签文本（p）。text（helloworld）设置标签文本内容（p）。html（）获取标签html文本（p）。html（h1helloworldh1）设置html文本内容取值操作jQueryjs。val（）。value（）例子：（input）。val（）获取值（input）。val（hello）设置值例子S。fn。init〔inputip〕（ip）〔0〕inputtypefileidip（ip）〔0〕。files〔0〕（ip）〔0〕先转化为原js对象，再用原js对象中files获取文件信息File｛name：1。png，lastModified：1600868737120，lastModifiedDate：WedSep23202021：45：37GMT0800（中国标准时间），webkitRelativePath：，size：21844，｝（ip）〔0〕。filesFileList｛0：File，length：1｝0：File｛name：1。png，lastModified：1600868737120，lastModifiedDate：WedSep23202021：45：37GMT0800（中国标准时间），webkitRelativePath：，size：21844，｝length：1proto：FileList属性操作jQueryattr（属性）获取属性值attr（属性，属性值）设置属性值removeAttr（属性）删除属性对应的js操作方法setAttribute（）getAttribute（）removeAttribute（）用于checkbox和radioprop（）获取属性removeProp（）移除属性例子letpEle（d1）undefinedpEle。attr（username）hellopEle。attr（username，helloworld）pEle。attr（username）helloworldpEle。attr（value，11）letiEle（d2）iEle。prop（checked）falseiEle。prop（checked）trueattr所指的属性时HTML标签属性，而prop是指DOM对象属性
　　注意：对于标签上有的能够看到的属性和自定义属性用attr（）方法
　　对于返回布尔值比如checkbox，radion，option这三个标签是否被选中，用prop方法文档操作jsjQuerycreateElement（p）（p）创建新标签appendChild（）append（）追加新标签例子letpEle（p）创建p标签undefinedpEle。text（你好世界）S。fn。init〔p〕pEle。attr（id，p2）（d1）。append（pEle）d1内部尾部追加p标签S。fn。init〔pd1〕pEle。appendTo（（d1））S。fn。init〔pp2，prevObject：S。fn。init（1）〕（d3）。prepend（pEle）内部头部追加S。fn。init〔pd3〕pEle。prependTo（（d3））S。fn。init〔p，prevObject：S。fn。init（1）〕（d3）。after（pEle）放在idd3的标签后面S。fn。init〔pd3〕pEle。insertAfter（（d3））S。fn。init〔p，prevObject：S。fn。init（1）〕（d3）。before（pEle）放在idd3的标签前面S。fn。init〔pd3〕pEle。insertBefore（（d3））S。fn。init〔p，prevObject：S。fn。init（1）〕（d1）。remove（）删除标签S。fn。init〔pd1〕（p1）。empty（）清空标签内容S。fn。init｛｝事件
　　事件绑定方式：第一种（d1）。click（functino（）｛alert（1）；｝）第二种语法：。on（events〔，selector（选择器）〕，function（）｛｝）（d1）。on（click，function（）｛alert（1）｝）（d1）。on（click，‘p，function（）｛alert（1）｝）
　　注意：DOM定义的事件可以用。on（）方法来绑定事件，但是jQuery定义的事件就不可以
　　常用事件有：click点击hover鼠标悬浮在目标上面blur输入域失去焦点focus输入域获取焦点（点击input输入框）change改变，一般用在选择、勾选框keyup释放键盘上的按键时触发keydown按下按键时触发input用户输入时触发
　　移除事件：把on改成off，就是移除。on（）绑定的事件
　　阻止后续事件执行：事件函数中添加returnfalse；（常用于阻止表单提交等）或者e。preventDefault（）
　　阻止事件冒泡：添加e。stopPropagation（）页面载入当页面加载完触发：（function（）｛｝与js的window。onload的区别1、window。onload（）函数有覆盖现象，必须等待图片资源加载完才能调用2、（functino（）｛｝不会出现覆盖，而且只要文档加载完毕就可以调用，不用等待图片资源加载事件委托
　　利用父标签去捕获子标签的事件！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8title事件委托titlestyletd｛height：20px；｝styleheadbodytablebordersolidtheadth增加thth删除ththeadtbodytrtdclassadd11tdtdclassdelete22tdtrtbodytablehellopvalueworldhelloworldbodyhtml
　　原创作者：NQ31
　　推荐阅读：
　　前端开发框架之jQuery和Vue的选择
　　前端开发之15个jQuery小技巧分享
　　前端开发之JQuery入门基础操作
　　前端开发框架jQuery的优势与基础知识分享