Web全栈20210131-jquery

1. 锋利的jquery（书， 具备 逻辑能力， html/css/javascript， jquery 是一个框架库 封装了 原生js
   https://jquery.cuishifeng.cn/index.html
   **优势：**减少代码量 提高兼容性 （写的少做的多） 简单好学

2. 根据开发需求 随时调整库的版本
   稳定版 1.9
   完整版 压缩版
   轻量级开发框架3

3. jquery代码的写法和原生js一致：
   根据元素是否初始化 代码两种方案：
   1.写在dom元素初始化之后
   jquery框架里面的对象
   jquery对象

4. jQuery 选择器
   window.jQuery==window.$，返回的是类数组
   　　$()函数在很多JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是.$(“#id”)通过id来获取元素,用来代替document.getElementById()函数.
   　　$(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数.jQuery的基本语法是:$(selector).action(), selector即选择器.
   　　jQuery选择器的分类
   　　jQuery的选择器基本可以分为四大类:
   　　基本选择器(basic)
   　　层次选择器(level)
   　　过滤选择器(filter)
   　　表单选择器(form)
   　　有些类别又可以分为具体的子类别.
   4-1基本选择器：
   　　* 匹配所有元素. 示例: $(“*")选取所有元素.

#id 根据给定的id匹配元素(最多只返回一个元素). 示例: $("#lastname”)选取id="lastname"的元素.

.class 根据给定的类名匹配元素. 示例:$(".intro”)选取所有class=“intro"的元素.

element 根据给定的元素名匹配元素. 示例: $(“p")选取所有

元素.

.class.class 示例: $(".intro.demo”)选取所有 class="intro"且class="demo”的元素.(交集).

selector1, selector2, …, selectorN, 将每一个选择器匹配到的元素合并后一起返回.(并集).
　　除了#id选择器返回单个元素外,其他选择器返回的都是元素集合.
4-2层级选择器
　$(“ancestordescendant”)选取ancestor元素里的所有descendant后代元素,包括直接子元素和更深嵌套的后代元素.例:$(“div span”)选取

里的所有的 元素.
　　注意:选择器都是全页面扫描,返回一个集合,所有符合选择条件的元素都会被包括进去.所以多个

下面的 都会被选择.
　　 $(“parent>child”)选取parent元素下的child子元素,即只有直接子元素被选取.其他后代元素不包括.例:$(“div>span”)选取

元素下元素名是 的子元素.
　　 $(“prev+next”)选取紧接在prev元素后的next元素(同一层级).例:$(“.one+div”)选取class为one的下一个div元素.
　　 $(“prevsiblings”)选取prev元素之后的所有siblings元素(同一层级).例:$(“#two~div”)选取id为two的元素后面的所有

兄弟元素.
　　等价方法:
　　 $(“prev+next”)等价于方法$(“prev”).next(“next”);选取prev元素之后紧接着的一个next元素.
　　 $(“prevsublings”)等价于方法$(“prev”).nextAll(“sublings”),选取prev元素之后的所有同级的sublings元素.
　　而$(“prev”).sublings(“next”)方法选取与prev同辈的所有next元素,与前后位置无关.
　4-3过滤选择器，过滤选择器这个大类又分为六个子类:基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.
　 :first
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:last
:lt(index)
:header
:animated
:focus

.内容选择器
:contains(text)
:empty
:has(selector)
:parent
.可见性选择器
:hidden
:visible

.子元素选择器
:first-child
:first-of-type1.9+
:last-child
:last-of-type1.9+
:nth-child
:nth-last-child()1.9+
:nth-last-of-type()1.9+
:nth-of-type()1.9+
:only-child
:only-of-type1.9+
　4-4表单选择器https://www.cnblogs.com/mengdd/p/4211663.html
　:input 匹配所有 input, textarea, select 和 button 元素
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file

.表单对象属性
:enabled
:disabled
:checked radio checkbox
:selected 针对下拉选择

.属性
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]

 [attrSel1][attrSel2][attrSelN]

//3.0+
    //混淆选择器   针对 class  id  名字有特殊符号
    var c = $.escapeSelector('.box');//先将名字中的符号转义  在  匹配
    console.log($('.' + c));
  

5. dom元素属性操作
   属性
   attr(name|pro|key,val|fn)
   removeAttr(name)
   prop(n|p|k,v|f)
   removeProp(name)
   CSS 类操作
   addClass(class|fn)
   removeClass([class|fn])
   toggleClass(class|fn[,sw])

hasClass() 检测元素是否具有某个类 true false
HTML代码/文本/值
html([val|fn])
text([val|fn])
val([val|fn|arr])

css样式操作
css 获取或设置元素的css

尺寸
height([val|fn])
width([val|fn])
innerHeight()
innerWidth()
outerHeight([options])
outerWidth([options])

位置
offset([coordinates]) 相对视口的偏移
position() 相对父元素的偏移
scrollTop([val])
scrollLeft([val])

文档处理
dom元素子父节点
内部插入
append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)

外部插入
after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

包裹
wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)
替换
replaceWith(content|fn)
replaceAll(selector)

复制
clone([Even[,deepEven]]) 参数是true false 一个参数 代表两个 true 事件处理函数被复制 子元素被复制

删除
empty() 删除元素的所有的子节点
remove([expr]) dom元素的事件删除
detach([expr]) dom会保留事件
注意：1. jquery转化成原生js对象。加上[0]， js转换成JQ。加上$（id）
2. jquery 支持隐式迭代 （一次性操作一堆）
要写jquery代码 需要引入jquery的库
按照引入js的方式引入到网页