锋利的jQuery系列<一>[通俗易懂]

锋利的jQuery系列<一>[通俗易懂]1.简介jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由JohnResig创建于06年1月的开源项目。现在的jQuery主要包括核心库、UI、插件和jQueryMobile这几大模块。2.配置jQuery环境进入jQuery的官网,下载最新的jQuery库文件。jQuery环境配置:jQuery不需要安装,把下载的jquery.js放到网站的一个公共的位

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

简介

jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由John Resig创建于06年1月的开源项目。现在的jQuery主要包括核心库、UI、插件和jQuery Mobile这几大模块。

一.配置jQuery环境

  1. 进入jQuery的官网,下载最新的jQuery库文件。

  2. jQuery环境配置:
    jQuery不需要安装,把下载的jquery.js放到网站的一个公共的位置,想要在某个页面中用jQuery时,只需要在相关的HTML文档中引入该类库文件的位置即可。

  3. 在页面中引入jQuery,在编写的页面代码中< head>标签内引入jQuery库后,就可以使用jQuery库了,下面是第一个jQuery程序:

<%-- Created by IntelliJ IDEA. User: Administrator Date: 2017/3/4 Time: 10:08 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>导航栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="../css/default.css" type="text/css" />
<script src="../images/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(function(){ 
 $(".level1 > a").click(function(){ 
 /** * 当鼠标点击到a元素(它是class含有level1的子元素)的时候,给其添加一个名为current的class, * 然后将紧邻其后面的元素显示出来,同时将它的父辈元素的同辈元素内部的子元素<a>都去掉一个名为 * current的class,并且将紧邻它们后面的元素都隐藏。 */ $(this).addClass("current") .next().show() .parent().siblings().children("a").removeClass("current") .next().hide(); return false; }); }); </script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none">衬衫</a>
<ul class="level2">
<li><a href="#none">短袖衬衫</a></li>
<li><a href="#none">长袖衬衫</a></li>
<li><a href="#none">短袖T恤</a></li>
<li><a href="#none">上袖T恤</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">卫衣</a>
<ul class="level2">
<li><a href="#none">开襟卫衣</a></li>
<li><a href="#none">套头卫衣</a></li>
<li><a href="#none">运动卫衣</a></li>
<li><a href="#none">时尚卫衣</a></li>
</ul>
</li>
<li class="level1">
<a href="#none">裤子</a>
<ul class="level2">
<li><a href="#none">短裤</a></li>
<li><a href="#none">休闲裤</a></li>
<li><a href="#none">牛仔裤</a></li>
<li><a href="#none">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

default.css

/* reset */
body{ 
margin:0;padding:0 0 12px 0;font-size:12px;line-height:22px;font-family:"\5b8b\4f53","Arial Narrow";background:#fff;}
form,ul,li,p,h1,h2,h3,h4,h5,h6{ 
margin:0;padding:0;}
input,select{ 
font-size:12px;line-height:16px;}
img{ 
border:0;}
ul,li{ 
list-style-type:none;}
a { 
color:#00007F;text-decoration:none;}
a:hover { 
color:#bd0a01;text-decoration:underline;}
.box { width: 150px; margin: 0 auto; }
.menu{ overflow:hidden; border-color: #C4D5DF; border-style: solid; border-width: 0 1px 1px; }
/* lv1 */
.menu li.level1 a{ display: block; height: 28px; line-height: 28px; background:#EBF3F8; font-weight:700; color: #5893B7; text-indent: 14px; border-top: 1px solid #C4D5DF; }
.menu li.level1 a:hover{ 
text-decoration:none;}
.menu li.level1 a.current{ 
background:#B1D7EF;}
/* lv2 */
.menu li ul{ 
overflow:hidden;}
.menu li ul.level2{ 
display:none;}
.menu li ul.level2 li a{ display: block; height: 28px; line-height: 28px; background:#ffffff; font-weight:400; color: #42556B; text-indent: 18px; border-top: 0px solid #ffffff; overflow: hidden; }
.menu li ul.level2 li a:hover{ color:#f60; }

上面代码中:

$(document).ready(function(){
...
});

的作用类似于JavaScript中的window.onload方法,不过与它还是有些区别:

  • window.onload执行时机:必须等待网页中所有内容加载完毕后,才能执行;$(document).ready()执行时机是网页中所有的DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完。
  • window.onload不能同时编写多个;$(document).ready()可以。
  • window.load没有简写的形式,$$(document).ready(function(){ … })可以简写为$(function(){ … })。

需要强调的是,在jQuery库中, $$符号就是jQuery的一个简写形式,例如$ (“#foo”)和jQuery(“#foo”)是等价的。

二 . jQuery对象和DOM对象

DOM对象即文档对象模型,每一份DOM都可以表示成一棵树。构建一个非常基本的网页。

jQuery对象就是jQuery包装DOM对象后产生的对象。

jQuery对象时jQuery独有的。如果一个对象时jQuery对象,那么就可以使用jQuery里的语法。例如:

//获取id为foo的元素内html代码。
$("#foo").html();
//这段代码等价于:
document.getElmentById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的方法。

注意:

用#id作为选择符取得的是jQuery对象而并非document.getElmentById(“id”)所得到的DOM对象,两者并不等价。注意分清jQuery对象和DOM对象。

三 . jQuery对象和DOM对象的互相转换

  • jQuery种提供两种将一个jQuery对象转换成DOM对象的方法:[index]和get(index)。
//[index]方式:
var $cr = $("#cr");
var cr = $cr[0];
alert(cr.checked)
//get(index)方式:
var $cr = $("#cr");
var cr = $cr.get(0);
alert(cr.checked)

注意:平时用到的jQuery对象都是通过$()函数创造出来的,这个函数就是一个jQuery对象的制造工厂。

四 . jQuery对象和DOM对象实例研究

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>论坛注册</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--引入jQuery库-->
<script src="../images/jquery.min.js" type="text/javascript"></script>
<!--DOM方式判断复选框是否被选中-->
<!-- <script type="text/javascript"> $(function(){ //等待dom元素加载完毕 var $cr = $("#cr"); //jQuery对象 var cr = $cr[0]; //DOM对象,或者$cr.get[0] $cr.click(function(){ if(cr.checked){ alert("感谢你的支持!你可以继续操作!"); } }); }); </script>-->
<!--jQuery方式-->
<script type="text/javascript"> $(function () { 
 //等待dom元素加载完毕 var $cr = $("#cr"); //jQuery对象 $cr.click(function(){ 
 if($cr.is(":checked")){ //jQuery方式判断 alert("感谢你的支持!你可以继续操作!"); } }); }); </script>
</head>
<body>
<input type="checkbox" id="cr"/> <label for="cr">我已经阅读了上面制度.</label>
</body>
</html>

上面例子简单演示了DOM对象和jQuery对象的不同,但最终效果是一样的。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:http://www.javaforall.cn/234726.html原文链接:http://www.javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 关于 ioctl 的 FIONREAD 參数

    关于 ioctl 的 FIONREAD 參数ioctl是用来设置硬件控制寄存器,或者读取硬件状态寄存器的数值之类的。而read,write是把数据丢入缓冲区,硬件的驱动从缓冲区读取数据一个个发送或者把接收的数据送入缓冲区。ioctl(keyFd,FIONREAD,&b)得到缓冲区里有多少字节要被读取,然后将字节数放入b里面。接下来就能够用read了。read(keyFd,&b,size…

  • PyCharm安装torch以及pytorch-pretrained-bert简单使用

    PyCharm安装torch以及pytorch-pretrained-bert简单使用安装torch运行Pycharm中的代码时候提示ModuleNotFoundError:Nomodulenamed‘torch’。试了很多种方法都不行,然后进入官网查了下具体的安装方法,附上网址https://pytorch.org/get-started/previous-versions/。摘取一段放在这里供大家参考。#CUDA10.0pipinstalltorch===1.2.0torchvision===0.4.0-fhttps://download.pytorc

  • 安装oracle11g oci.exe,oracle 11g安装图解|安装oracle数据库软件详细教程[通俗易懂]

    安装oracle11g oci.exe,oracle 11g安装图解|安装oracle数据库软件详细教程[通俗易懂]oracle是非常强大的数据库软件,有很多朋友对oracle安装并不是很了解,因为除了安装还有一些变量需要设置,下面一起来看看oracle11g安装图解,定能帮助你快速安装oracle11g。Oracle11g安装图解:1、首先下载Oracle11gR2forWindows的版本本站下载地址:其中包括两个压缩包:win64_11gR2_database_1of2.zip,win64_…

  • 一文教你了解SSL协议「建议收藏」

    一文教你了解SSL协议「建议收藏」什么是SSL简称是SSL,全称SecureSocketsLayer安全套接字协议,一般我们在学习SSL的时候,都会和TLS一起来学习的,为什么呢?因为SSL和TLS都是为网络通信提供安全及数据完整性的一种安全协议。TLS与SSL在传输层与应用层之间对网络连接进行加密。我们先看SSL协议,然后在看TLS协议。SSL协议位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持。SSL协议可分为两层: SSL记录协议(SSLRecordProtocol)

  • 《增长黑客》节选与笔记[通俗易懂]

    《增长黑客》节选与笔记[通俗易懂]《增长黑客》节选与笔记自序1.1 创业家的黑暗前传1.2 增长黑客的胜利1.3 什么是“增长黑客”1.4 增长黑客的职责和特质1.5 一切用数据说话1.6 增长黑客担任的团队角色1.7 如何招聘增长黑客1.8 如何成为增长黑客1.9 增长黑客的常用工具箱第2章 创造正确的产品2.1 Instagram重生记2.2 PMF,探寻产品与市场的完美契合2.3 拒绝…

  • TypeError: ‘Collection‘ object is not callable. If you meant to call the ‘insert‘ method on a ‘Datab

    TypeError: ‘Collection‘ object is not callable. If you meant to call the ‘insert‘ method on a ‘DatabfrompymongoimportMongoClient报错问题描述解决方法问题描述使用pymongo连接本地的MongoDB,跟个老师的视频,出现报错,后查询资料改正frompymongoimportMongoClient#创建数据库连接对象client=MongoClient()#选择一个数据库db=client[‘python’]#身份认证#db.authenticate(‘python’,’python’)#选择一个集合col=c

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号