脚本宝典收集整理的这篇文章主要介绍了学习jQuery的第一天,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
前言
1、 jQuery简介
1.1、JavaScript库
1.2、jQuery的概念
1.3、jQuery的优点
1.4、jQuery的入口函数
2、jQuery选择器
2.1、jQuery基本选择器
2.2、jQuery层次选择器
2.3、jQuery筛选选择器
3、jQuery中的排他思想
总结
小编我又回来了,今天又是元气满满的一天,今天又是好好学习的一天。小编我今天又来和大家做分享了。今天是小编接触jQuery的第一天。了解到了jQuery之后我突然觉的JavaScript原生js一点也不香了。感觉有了jQuery小编我又可以偷懒了!我迫不及待的想要个大家分享了!快拿起你们的小本本,带上你们聪明的大脑我们一起来看看吧!
JavaScript库:就是library,是一个封装好的待定的集合(方法和函数),从封装一大堆函数的角度理解库,就是在这个库中封装了很多预先定义好的函数在里面。
简单理解就是:一个JS文件,里面对我们的原生js代码进行了封装,存放到里面,这样我们就可以快速高效的使用这些封装好的功能了。
常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我目前主要学习的是 jQuery。
在小编我看来jQuery与JavaScript的区别就像是电梯与楼梯,比如你楼修的高了,一个是电梯一个是楼梯,小编我不知道你们是选择楼梯还是电梯,反正小编我是选择电梯。原因是楼梯你爬的再快最后你还是爬不过电梯,第二就是因为小编懒,不想爬楼梯!哈哈哈!
jQuery常见的两种入口函数:
// 第一种: 简单易用。
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
// 第二种: 繁琐,但是也可以实现
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
在一般情况下我们最常用的是第一种方法,因为他语言简单好记!看来我们的程序员都是懒人。哈哈哈!
jQuery获取元素语法格式:
$("选择器") // 里面选择器直接写 CSS 选择器即可,但是要加引号
基本选择器:
层次选择器:
筛选选择器:
在jQuery中筛选代码肯定不止这一点点,当然还有其他的,其他的类似DOM中的通过一个节点找另外一个节点,父、子、兄以外有所加强。
当看到jQuery中的排他思想之后我发现它是真的让我耳目一新的感觉。这个代码量太少了,让我找到新大陆。如获至宝啊!因为在我们的原生js代码中的排他思想我们需要去用for循环去实现,当你绞尽脑汁写完之后看到那代码真的是心酸。但当我看完jQuery的排他思想后我发现我真的是恨自己为什么没有早点知道jQuery这个东西。下面我给大家展示一下jQuery的排他思想案例吧!让你们也一起看看!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jQuery/jquery.min.js"></script>
</head>
<body>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
//隐式迭代给所有的按钮都绑定了点击事件
$("button").click(function() {
//当前的元素变化背景颜色
$(this).css('background', 'pink');
//其余的兄弟去掉背景颜色
$(this).siblings("button").css("background", "");
});
});
</script>
</body>
</html>
看到只有两行的代码,那些还在写js原生代码的小伙伴们你们哭了吗?觉得心酸吗?原生代码好多行的逻辑在这里只需要两行!你感动吗?
今天小编的分享就到这里了,学习了一天的jQuery还是收获满满的,不知道小伙伴你们收获了多少?但是今天的jQuery让我感觉到了一个不一样的世界,让我觉得很有趣!爱了爱了,被jQuery圈粉了。
以上是脚本宝典为你收集整理的学习jQuery的第一天全部内容,希望文章能够帮你解决学习jQuery的第一天所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。