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

　　jQuery对象
　　jQuery对象是通过jQuery包装DOM对象后产生的对象
　　注意：jQuery对象只能使用jQuery里的方法，DOM对象只能使用DOM对象的方法  jQuery基础知识点查找标签
　　基本选择器  id选择器：$(＂#id＂)  标签选择器：$(＂tagName＂)  class选择器：$(＂.className＂）  配合使用：$(＂p.c1＂) //找到有c1的p标签  所有元素选择器：$(＂*＂)  组合选择器：$(＂#id, .className, tagName＂)
　　层级选择器：  $(＂p span＂); //p标签下所有后代span标签（子标签 ，子子标签...)  $(＂p > sapn＂); //p标签下所有儿子span标签  $(＂p + span＂); //紧挨着p标签的第一span元素  $(＂p~span＂); //p标签下所有兄弟元素span.
　　基本筛选器：  :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)//例子 $(＂ul li:first＂) S.fn.init [li, prevObject: S.fn.init(1)] $(＂ul li:gt(3)＂) S.fn.init(6) [li, li#l1, li, li.cl1, li, li, prevObject: S.fn.init(1)] $(＂ul li:has(#l1)＂) S.fn.init [prevObject: S.fn.init(1)]length: 0prevObject: S.fn.init [document]__proto__: Object(0) $(＂ul li:not(.cl1)＂) S.fn.init(9) [li, li, li, li, li, li#l1, li, li, li, prevObject: S.fn.init(1)] $(＂ul li:odd＂) S.fn.init(5) [li, li, li#l1, li.cl1, li, prevObject: S.fn
　　属性选择器：  [属性】  [属性名=value]  [属性!=value]  //例子 $(＂[username]＂) S.fn.init(2) [input, input, prevObject: S.fn.init(1)] $(＂[username=＂hello＂]＂) 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标签 等价于$(＂p p＂)  $(＂p＂).filter(＂.c1＂) //查找含有c1样式类的p标签。 等价于$(＂p.c1)  $(＂p＂).first()  $(＂p＂).last()  $(＂p＂).not()  $(＂p＂).has()  $(＂p＂).eq()
　　标签操作样式操作jQuery                               js addClass();                          classList.add() removeClass();                       classList.remove() hasClass();  //判断样式是否存在       classList.contains() toggleClass();//有则删去，无则添加    classList.toggle()//例子 $(＂#d1＂).toggleClass(＂c1＂) S.fn.init [p#d1.c2] $(＂#d1＂).addClass(＂c1＂) S.fn.init [p#d1.c2.c1] $(＂#d1＂).toggleClass(＂c2＂) S.fn.init [p#d1.c1]位置操作offset() 获取匹配元素在当前窗口的相对偏移或这种元素位置  position() 获取匹配元素相对父元素的偏移  scrollTop() 获取匹配元素相对滚动条顶部的偏移  scrollLeft() 获取匹配元素相对滚动条左侧的偏移  尺寸：height() 高度  widght() 宽度  innerHeight()  innerWidth()　　  outerHeght()  outerWidth()
　　文本操作//jQuery                           js text()                             innerText() html()                             innerHtml() //例子 $(＂p＂).text()     //获取标签文本 $(＂p＂).text(＂hello world＂)    //设置标签文本内容 $(＂p＂).html()    //获取标签html文本 $(＂p＂).html(＂
hello world
＂)  //设置html文本内容取值操作//jQuery                    js .val()                      .value() //例子： $(＂input＂).val()             //获取值 $(＂input＂).val(＂hello＂)      //设置值   //例子 S.fn.init [input#ip] $(＂#ip＂)[0]  $(＂#ip＂)[0].files[0]   //$(＂#ip＂)[0]先转化为原js对象，再用原js对象中files获取文件信息 File {name: ＂1.png＂, lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中国标准时间), webkitRelativePath: ＂＂, size: 21844, …} $(＂#ip＂)[0].files FileList {0: File, length: 1}0: File {name: ＂1.png＂, lastModified: 1600868737120, lastModifiedDate: Wed Sep 23 2020 21:45:37 GMT+0800 (中国标准时间), webkitRelativePath: ＂＂, size: 21844, …}length: 1__proto__: FileList属性操作//jQuery attr(属性)         //获取属性值 attr(属性，属性值)   //设置属性值 removeAttr(属性）  //删除属性 //对应的js操作方法 setAttribute() getAttribute() removeAttribute() //用于checkbox和radio prop()    //获取属性 removeProp()  //移除属性//例子 let $pEle=$(＂#d1＂) undefined   $pEle.attr(＂username＂) ＂hello＂ $pEle.attr(＂username＂,＂hello world＂)   $pEle.attr(＂username＂) ＂hello world＂ $pEle.attr(＂value＂,＂11＂)   let $iEle=$(＂#d2＂)   $iEle.prop(＂checked＂) false $iEle.prop(＂checked＂) true //attr所指的属性时HTML标签属性，而prop是指DOM对象属性
　　注意：对于标签上有的能够看到的属性和自定义属性用attr()方法
　　 对于返回布尔值比如checkbox，radion，option这三个标签是否被选中，用prop方法  文档操作//js                    jQuery createElement(＂p＂)      $(＂
＂)   //创建新标签 appendChild()           append()  //追加新标签//例子 let $pEle=$(＂
＂)  //创建p标签 undefined $pEle.text(＂你好 世界 ＂) S.fn.init [p] $pEle.attr(＂id＂,＂p2＂)   $(＂#d1＂).append($pEle)   //d1内部尾部追加p标签 S.fn.init [p#d1] $pEle.appendTo($(＂#d1＂)) S.fn.init [p#p2, prevObject: S.fn.init(1)]   $(＂#d3＂).prepend($pEle)  //内部头部追加 S.fn.init [p#d3] $pEle.prependTo($(＂#d3＂)) S.fn.init [p, prevObject: S.fn.init(1)]   $(＂#d3＂).after($pEle)   //放在id=d3的标签后面 S.fn.init [p#d3] $pEle.insertAfter($(＂#d3＂)) S.fn.init [p, prevObject: S.fn.init(1)]   $(＂#d3＂).before($pEle)  //放在id=d3的标签前面 S.fn.init [p#d3] $pEle.insertBefore($(＂#d3＂)) S.fn.init [p, prevObject: S.fn.init(1)]   $(＂#d1＂).remove()  //删除标签 S.fn.init [p#d1] $(＂#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()绑定的事件
　　阻止后续事件执行：事件函数中添加 return false; (常用于阻止表单提交等）或者e.preventDefault()
　　阻止事件冒泡：添加e.stopPropagation()  页面载入//当页面加载完触发： $(function(){ } /* 与js的window.onload的区别 1、window.onload()函数有覆盖现象，必须等待图片资源加载完才能调用 2、$(functino(){}不会出现覆盖，而且只要文档加载完毕就可以调用，不用等待图片资源加载 */事件委托
　　利用父标签去捕获子标签的事件                               
         
             
增加
             
删除
         
         
             
                 
11
                 
22
             
         
     
              hello         
hello world            
　　原创作者： NQ31
　　推荐阅读：
　　前端开发框架之jQuery 和 Vue 的选择
　　前端开发之15个jQuery小技巧分享
　　前端开发之JQuery入门基础操作
　　前端开发框架jQuery的优势与基础知识分享