学习jQuery基础语法,并通过一个案例引出jQuery的核心
2024-09-06 19:37:42
jquery是一个快速、小巧,功能强大的javascript函数库。
jquery主要用来替代原生的javascript,简化代码。
前端最头疼的就是兼容:IE6/7/8兼容的最高版本是jQuery1.9.1
jQuery的操作在一个类中,不会污染顶级变量
基本不用考虑浏览器的兼容性
支持链式操作方式
隐式迭代
行为层和结构层分离
丰富的插件支持
jQuery符号:
jQuery=function jQuery(arg){
alert(arg);
}
$=window.jQuery=jQuery; $(arg)=jQuery(arg);
window.jQuery === window.$
$ === jQuery
typeof $ -> function
绝大多数情况下,直接使用 $ ,如果 $ 被占用,就使用 jQuery
jQuery.noConflict() 释放 $,但不释放 jQuery
$ //jQuery(selector,context)
jQuery.noConflict() //释放 $,但不释放 jQuery
$ //undefined
jQuery //jQuery(selector,context)
下面两句是等价的
$("div").addClass("div");
jQuery("div").addClass("div");
HTML加载完成的三种书写方式
//html加载完成
$(document).ready(function(){
$("div").addClass("div");
}); //简写方式1
$().ready(function(){
$("div").addClass("div");
}); //简写方式2
$(function(){
$("div").addClass("div");
});
jquery 行为层方法简介:
.css({}) 改变元素样式
以下是原生js写法与jquery写法对比
// 原生js
var alinks=$("a");
for(var i=0;i<alinks.length;i++){
alinks[i].style.color="pink";
alinks[i].style.backgroundColor="#abcdef";
alinks[i].style.border="1px solid #fff";
} // jquery
var alinks=$("a");
for(var i=0;i<alinks.length;i++){
alinks.eq(i).css({
"color":"pink",
"background-color":"#abcdef",
"border":"1px solid #fff"
});
}
.text() 改变元素内的文本
以下是原生js写法与jquery写法对比
// 原生js
var alinks=$("a");
for(var i=0;i<alinks.length;i++){
alinks[i].innerHTML="喵喵"+i;
} // jquery
var alinks=$("a");
for(var i=0;i<alinks.length;i++){
alinks.eq(i).text("喵喵"+i);
}
.html() 改变元素内的内容,可以带HTML标签
以下是原生js写法与jquery写法对比
// 原生js
var alinks=$("a");
for(var i=0;i<alinks.length;i++){
alinks[i].innerHTML="喵喵"+i;
} // jquery
var alinks=$("a");
for(var i=0;i<alinks.length;i++){
alinks.eq(i).text("喵喵"+i);
alinks.eq(i).html("<strong>"+"喵喵"+i+"</strong>");
}
小案例:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery</title>
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<span class="top"></span>
<nav>
<a href="#">banner1</a>
<a href="#">banner2</a>
<a href="#">banner3</a>
<a href="#">banner4</a>
</nav>
<div class="img-box">
<img src="data:image/cat1.jpg">
<img src="data:image/cat2.jpg">
<img src="data:image/cat3.jpg">
<img src="data:image/cat4.jpg">
</div>
</body>
</html>
style.css
* { margin:; padding:; border: none; }
html, body { overflow: hidden;/*解决因为盒模型溢出造成的垂直方向滚动条*/ height: 100%; background-color: rgb(145, 176, 200); }
span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; }
nav { position: relative; display: flex;/*弹性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*实现元素在容器内左右均匀分布*/ }
nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活伪元素*/ background-color: #fff; }
nav > a { font-size: 14px; position: relative; /*默认是static定位,会被绝对定位覆盖 修改为相对定位之后,会覆盖前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; }
.img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); }
.img-box img { position: absolute; top:; right:; bottom:; left:; width: 98%; margin: auto;/*以上5句实现绝对定位的居中*/ }
/*# sourceMappingURL=style.css.map */
script.js
$(function(){
$("a").click(function(){
$("img").eq($(this).index()) // 获取当前点击的a的index
.css({"opacity":"1"})
.siblings()
.css({"opacity":"0"});
});
});
效果图
最新文章
- css3线条围绕跑马+jquery打字机效果
- UITabBarController使用总结
- Node.js项目目录介绍
- 纯JavaScripst的全选、全不选、反选 【转】
- jQuery中append()与appendTo()方法区别
- 如何使用github上传自己的开源项目教程
- mac 下基于firebreath 开发多浏览器支持的浏览器插件
- Light oj 1214-Large Division (同余定理)
- Android 滑动效果进阶篇(六)—— 倒影效果
- matlab 怎么保存plot的图 到指定文件夹
- Mantle 简单教程
- linux hash_map
- laravel资源路由详解
- 微信小程序 服务器端生成用户登陆环节的 3rd_session
- 安装kafka过程及出现的问题解决
- (count 或直接枚举) 统计字符 hdu1860
- mysql创建索引以及对索引的理解
- JS两种事件的触发方式
- 【其他】msb-lsb-intel-motorola大小端问题
- 【转】SVG与HTML、JavaScript的三种调用方式
热门文章
- 安装anaconda python时只能安装到默认文件夹&;&; 安装提示文件夹以存在问题
- Java服务端两个常见的并发错误
- ELK实战-elasticsearch安装
- linux--->;阿里云centos6.9环境配置安装lnmp
- STM8上电默认电平不对的解决
- 使用NetBenchmark压测TCP,HTTP和Websocket服务
- Arduino系列之按键模块(一)
- Eclipse中文语言包安装和设置中文
- ATL的GUI程序设计(前言)
- 时序数据库 Apache-IoTDB 源码解析之文件索引块(五)