Jquery选择器和js

jquery选择器：

1.基本选择器

#id 

例子：

$(function(){

$("#myDiv");

}）
body{

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

}
结果：

[ <div id="myDiv">id="myDiv"</div> ]

element：根据给定的元素标签名匹配所有元素

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

.class  根据给定的css类名匹配元素。

 

*选择器：匹配所有元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。

HTML 代码:

<div>div</div>
<p class="myClass"><p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass"><p class="myClass"</p>, <span>span</span> ]

层次选择器

div .left 所有后代
div>.left 第一代 子代
div +.left 下一个兄弟节点
div ~.left 后面所有的兄弟节点
div.left 元素本身

[arr] 包含这个属性
[arr=val] 等于
[arr!=val] 不等于
[arr*=val] 包含
[arr^=val] 开头
[arr$=val] 结尾

a[href] a标签的元素
a[href='#'] a标签为#连接的元素
a[href!='#'] a标签不为#连接的元素
a[class^='1'] 类开头为1的元素
a[class$='1'] 类结尾为1的元素

 

1.getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
  document.getElementById() id属性
2.   getElementsByClassName() 方法返回文档中所有指定类名的元素集合
document.getElementsByClassName() class属性
3.getElementsByName() 方法可返回带有指定名称的对象的集合。
  document.getElementsByName() name 属性
4.getElementsByTagName() 方法可返回带有指定标签名的对象的集合。document.getElementsByTagName() 标签里面的东西
5.   querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
Document.querySelector() 单个 CSS .div #div div
6.返回所有的元素，请使用 querySelectorAll() 方法替代。
document.querySelectorAll() 集合

  onload和ready的区别
1.onload:必须等待网页全部加载完毕（包括图片等），然后再执行JS代码
     并且只能执行一次，如果第二次，那么第一次的执行会被覆  window.onload = function() {var div = document.querySelector("#div")

 console.log() 方法用于在控制台输出信息。
console.log(div)
}
   window.onload = function() {
console.log(0)
   }
2. ready:只需要等待网页中的DOM结构加载完毕，就能执行JS代码并且
     可以执行多次，第N次都不会被上一次覆盖
 
$(document).ready(function () {
console.log(0)
})
$().ready(function () {
    console.log(1)
})
   $(function () {
console.log(2)
   })

 

 

 js和jq的转换
$(function(){
// var $div=$("#div");
// console.log($div)
// var div=document.getElementByI("div");
// console.log(div===$div[0])
//js=>jq $(dom) 工厂函数
//jq=>js $[idx]

})

jq的相关信息
https://jquery.cuishifeng.cn/