文章目录
- 一、jQuery基础
- jquery对象
- jquery入口函数
- 二、jQuery基本使用
- 三、jquery选择器
一、jQuery基础
首先我们应该认识到什么是jQuery，在网上，对于jQuery有以下定义：
1、jQuery 是一个 JavaScript 函数库。
2、jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库
jQuery简介：
jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互等
从上面的简介我们可以看出，jquery是一个帮助我们进行开发的工具，在使用时能够给我们提供更高效的代码。
除了以上特点之外，jquery还有一个功能就是不用下载而可以通过引入直接进行使用
//jquery引用代码
<script type="text/javascript" src="js/jquery.js"></script>jquery对象
jquery对象就是通过使用jquery从而赋值给一个变量就是jquery对象。
//jquery对象
var $jq = $('input');jQuery对象和js对象的转换
jQuery对象可以使用jQuery的附加功能，在操作时更加方便
jQuery对象与js对象方法不通用
但两者可以相互转换
JS对象 转 JQ对象：$(js对象)
JQ对象 转 JS对象： jq对象[索引]或jq对象.get(索引)
var t1 = document.getElementById('t1'); //JS对象
var $jq = $('input'); //jquery对象
//JS对象--JQ对象:$(t1)
//JQ对象--JS对象:$jq[0]或者$jq.get(0)jquery入口函数
jquery有入口函数：$(document).ready(函数名/匿名函数)
jQuery 所有函数都位于一个 document ready 函数中，为什么会有这个入口函数呢，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作，比如以下操作：
1、试图隐藏一个不存在的元素
2、获得未完全加载的图像的大小
如果你细心一点就可能会发现，jquery和window.onload有一些相似之处：
那就是两者都是需要在网页页面加载完成之后才会执行
但他们也有区别：
window.onload 只能绑定一个函数，且必须等待网页中所有内容加载完毕
而(document).ready() 可以绑定多个函数，当DOM结构加载完毕就执行
二、jQuery基本使用
1、jQuery 使用 CSS 选择器来选取 HTML 元素
- $(‘CSS选择表达式’)
- 表达式需加引号
- 返回的是单个元素或元素组
2、jQuery 基本方法text()、html()、val()、attr()
- 对应innerText、innerHTML、value
- 获取：括号内不加参数
- 修改：括号内加参数
- 若jQuery对象为元素组，则修改该对象对所有元素
- attr()的作用是获取或修改元素属性
jquery还可以进行基本事件绑定
<input type="button" id="t1" value="添加" />
<script type="text/javascript">
var $jq = $('#t1').click(show)
function show(){
alert("hello world")
}
</script>三、jquery选择器
基础选择器：
* | $("*") | 所有元素 |
#id | $("#lastname") | id=“lastname” 的元素 |
.class | $(".intro") | 所有 class=“intro” 的元素 |
element | $(“p”) | 所有 p标签元素 |
.class.class | $(".intro.demo") | 所有 class=“intro” 且 class=“demo” 的元素 |
s1,s2,s3 | $(“th,td,.intro”) | 所有标签为th、td以及class=“intro” 的元素 |
