JavaScript是一种面向对象的编程语言, 旨在使Web开发更轻松, 更有吸引力。在大多数情况下, JavaScript用于创建网页的响应式交互式元素, 从而增强了用户体验。
jQuery的是一个开放源代码的JavaScript库, 它简化了HTML / CSS文档(或更确切地说是文档对象模型(DOM))与JavaScript之间的交互。
选择:在jQuery中, 要选择任何元素, 我们只需使用$()符号, 但是在JavaScript中, 要选择任何元素, 我们可以使用querySelector()orquerySelectorAll().
// jQuery to select all instances
// of class "select"
$(".select");
// JavaScript to select only the
// first instance of class "select"
document.querySelector(".select");
// To select all the instances
// of class "select"
document.querySelectorAll(".select");
选择器的其他一些示例:
要选择整个html:
- 在jQuery中:
$("html")
- 在JavaScript中:
document.querySelector(selector)
- 在jQuery中:
$("body")
- 在JavaScript中:
document.body
// To add a class "class-name" to a tag
// jQuery:
$p.addClass(class-name) // JavaScript:
p.classList.add(class-name)
下面是其他一些操纵示例:
要将类添加到html元素:
- 在jQuery中:
$element.addClass(class-name)
- 在JavaScript中:
element.classList.add(class-name)
- 在jQuery中:
$element.removeClass(class-name)
- 在JavaScript中:
element.classList.remove(class-name)
- 在jQuery中:
$element.toggleClass(class-name)
- 在JavaScript中:
element.classList.toggle(class-name)
- 在jQuery中:
$element.hasClass(class-name)
- 在JavaScript中:
element.classList.has(class-name)
// To add an event on button click// jQuery:
/* handle click event */
$(".button").click( function(event) {
});
// JavaScript:
/* handle click event */
document.querySelector(".button")
.addEventListener("click", (event) => {
});
CSS样式:
// To give a margin of 10px to all the div
// jQuery:
$div.css({ margin: "10px" }) // JavaScript:
div.style.margin= "10px"
推荐阅读
- PHP如何使用dns_get_mx()函数()
- 2017正版windows10企业版激活图文详细教程安装图文详细教程
- 本图文详细教程教你处理win10开机黑屏
- 电脑管家win10专版最新推荐
- 本图文详细教程教你微软官网win10专业版原版镜像地址
- 分享最新win10 激活码激活系统最新推荐
- 微软官方Windows10升级工具易升制作详细说明
- 本图文详细教程教你win10如何更改屏幕分辨率
- win10 ghost一键安装图文详细教程