一、jquery的简介和安装
js原生:不使用任何框架 (库),全部使用系统提供的 js 属性与方法 (API) 进行编程的方式
应用 程序 接口
API (Appliction Program Interface):应用程序编程接口
是一些事先预定义的的函数,目的是提供应用程序与开发人员,
基于某一个软件可以访问的一系列功能的能力,无需访问源码即可完成功能处理
jquery 简介: 是一个 javascipt 的函数库,是一个轻量级的 js 库 (写的少做的多)
功能:
元素选取 元素操作 创建元素 css操作
事件函数 特效与动画 遍历与修改方法 ajax ……
jquery 极大程度上封装了 dom 的方法,简易了 DOM 的繁琐操作
在 jquery1.X 版本中,有50%的代码是在做浏览器兼容,所有使用jquery1.X版本不用担心兼容性
jquery 的安装:
1) 直接引入
语法:
jquery 官方的
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>;
菜鸟
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">;
</script>
百度
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">;
</script>
微软
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">;
</script>
谷歌
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">;
</script>
注:必须联网
type="text/javascript": 不用写是因为 HTML5 以及现在多有浏览器中 js 是默认的脚本语言
优点:
许多用户在访问其他网站时,已经从这些地方加载过jquery,
当你访问本地站点时,可以从缓存中直接加载 ,减少加载的时间,提高加载速度
缺点:无网络是无法加载
2) 下载 jquery,引入相对路径
语法:
<script scr="lib/jquery-1.11.3.min.js"></script>
注:jquery 必须引入到自己写的 js 代码之上
jquery 版本区别:.
1.X版本:大量的兼容性代码,兼容所有浏览器,文件比较大
2.X版本: 不兼容IE 6 7 8,文件相比较小
3.X版本:不兼容低端浏览器,极大地缩小文件
jquery文件中min意思
带有min:开发版本,压缩版本文件中的空格换行 tab 全部去掉,文件比较小
不带min:测试版本,学习版本,可以清楚的看到 jquery 所有代码逻辑,文件较大,不利于快速加载
jquery 中:
$.ready() 于原生的window.onload 有着相同的功效,
window.onload 在一个页面中只能有一个,$.ready() 在一个页面中可以有无数个
二、jquery 优点
1. 轻量级
文件非常小,功能很强大
2. 非常强大的选择器
选择元素以及设置样式非常方便
3. 出色的dom操作
1) 提供了html节点方法,可以轻松的对节点进行操作
2) 可以轻松地进行多个css样式添加改变
3) 提供了极度方便的事件机制
4. 完善的ajax机制
5. 出色的浏览器兼容
6. 链式操作
$("div").attr("class","oDiv").css("color","red").appendTo("#box")
7. 丰富的插件,完善的事件机制完全开元免费
8. jquery向我们透出三个方法调用jquer你,y的API
1) $最常用
2) jQuery 其次
3) var j = $.noConflict()
可以领 j 这个变量调用所有的 jquery API
注意:这个东西要紧挨这 jquery 引入以下的一个独立作用域内部 防止被占用方法的影响
三、jquery 选择器
基本选择器
层次选择器
过滤选择器
表单选择器
1) 基本选择器
#id $("#id");
.class $(".class")
element $("ele")
* $("*")
并集:$("div.box", p , span)
2) 层次选择器
后代选择器 $("div span").
儿子选择器 $("div>span").
兄弟选择器 $("div+span").
后边所有兄弟的 $("div~p").