分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

jQuery的介绍

发布时间:2023-09-06 02:11责任编辑:傅花花关键词:jQuery

什么是jQuery

jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率。

js库是把我们常用的功能放到一个单独的文件中,我们在用的时候,直接引用到页面里即可。

关于jQuery的相关资料:


  • 官网:http://jquery.com/

  • 官方API文档:http://api.jquery.com/

  • 汉化API文档:http://www.css88.com/jqapi-1.9/

为什么要使用jQuery

在用js写代码的时候,会遇到一些问题:


  • window.onload事件有事件覆盖的问题,因此只能写一个事件。

  • 代码容错性差

  • 浏览器兼容性问题

  • 书写很繁琐,代码量多

  • 代码混乱

  • 动画效果很难实现


而jQuery的出现,可以解决以上问题。

jQuery的特点


jQuery有两个特点

  • 链式编程:比如.show()和.html()可以连写成.show().html()

  • 隐式迭代:隐士对应的是显示。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。


学习jQuery,主要是学什么


在学习jQuery的初期,主要学习如何使用jQuery操作DOM,其实就是学习jQuery封装好的那些API。

这些API的共同特点是:几乎全部都是方法。所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号"()",小括号里面是对应的参数,参数不同,功能不同。

jQuery代码和js代码的比较

使用原生js来实现下面代码效果:

<!DOCTYPE html><html><head> ???<title>js Demo</title> ???<style type="text/css"> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: green; ???????????margin-top: 20px; ???????????display: none; ???????} ???</style> ???<script type="text/javascript"> ???????window.onload = function(){ ???????????var oBtn = document.getElementsByTagName("button")[0]; ???????????var divArr = document.getElementsByTagName("div"); ???????????oBtn.onclick = function(){ ???????????????for(var i = 0; i < divArr.length; i++){ ???????????????????divArr[i].style.display = "block"; ???????????????????divArr[i].innerHTML = "test"; ???????????????}; ???????????} ???????} ???</script></head><body> ???<button>操作</button> ???<div></div> ???<div></div> ???<div></div></body></html>

如果用jQuery来写,保持html和css代码不变,只修改script部分代码:

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>jQuery Demo</title> ???<style type="text/css"> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: green; ???????????margin-top: 20px; ???????????display: none; ???????} ???</style> ???<script type="text/javascript" src="jquery.js"></script> ???<script type="text/javascript"> ???????$(function(){ ???????????// 获取DOM元素 ???????????var oBtn = $("button"); //根据标签名获取元素 ???????????var oDiv = $("div"); ???//根据标签名获取元素 ???????????oBtn.click(function(event) { ???????????????oDiv.show(1000); ???//显示div ???????????????oDiv.html("test") ??//设置内容 ???????????}); //事件是通过方法绑定的 ???????}) ???</script></head><body> ???<button>操作</button> ???<div></div> ???<div></div> ???<div></div></body></html>

jQuery的介绍

原文地址:https://www.cnblogs.com/yang-wei/p/9534735.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved