jQuery-w3school（2020.2.16）【一、jQuery vs js】

一、jQuery vs js
（一）jQuery选择器
1.想使用jQuery选择器需要写上配置文件

<script src="jquery.min.js"></script>

jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
2. jQuery选择器
通过 id 来查找 HTML 元素

var myElement = $("#id01");//jq
var myElement = document.getElementById("id01");//js

通过标签名来查找 HTML 元素

var myElements = $("p");//jq
var myElements = document.getElementsByTagName("p");//js

通过类名来查找 HTML 元素

var myElements = $(".intro");//jq
var myElements = document.getElementsByClassName("intro");//js

组合使用，通过 CSS 选择器查找 HTML 元素
返回包含 class=“intro” 的所有 <p> 元素的列表。

var myElements = $("p.intro");//jq
var myElements = document.querySelectorAll("p.intro");//js

（二）jQuery HTML
1.设置文本内容
设置 HTML 元素的内部文本：

var myElement = $("#02");
myElement.text("Hello China!");//jq

jQuery用e.text()方法，js用e.textContent属性。

var myElement = document.getElementById("02");
myElement.textContent = "Hello China!";//js

2.获取文本内容
获取 HTML 元素的内部文本

var myElement = $("#02");
var myText = myElement.text();//jq

var myElement = document.getElementById("02");
var myText = myElement.textContent || myElement.innerText;//js

3.设置元素的 HTML 内容

var myElement = $("#02");
var myElement.html("<p>Hello World</p>");//jq

var myElement = document.getElementById("02");
var myElement.innerHTML = "<p>Hello World</p>";//js

4.获取元素的 HTML 内容：

var myElement = $("#02");
var content = myElement.html();//jq

var myElement = document.getElementById("02");
var content = myElement.innerHTML;//js

（三）jQuery CSS
1.隐藏一个 HTML 元素：

myElement.hide();//jq

myElement.style.display = "none";//js

2.显示一个 HTML 元素：

myElement.show();//jq

myElement.style.display = "";//js

3.样式化 HTML 元素
更改 HTML 元素的字体尺寸：

myElement.css("font-size","35px");//jq

myElement.style.fontSize = "35px";//js

（四）jQuery DOM
1.删除 HTML 元素：

$("#id").remove();//jq

element.parentNode.removeChild(element);//js

2.获取父元素
返回 HTML 元素的父元素：

var myParent = myElement.parent();//jq

var myParent = myElement.parentNode;//js