

JQ简介,下载,引入,调用语法,选择符,基础用法及例子
一、JQ介绍与组件下载
1. JQ是建立在JS上的轻量级的S库,它可以写的更少,做的更多,可理解为JS写的的一些函数,直接调用,可少写代码
2. 它的库文件要到www.Jquery.com下载,做网站下载压缩的那个库,学习下载没压缩的,
二、 JQ引入html方法与$作用
1. 引入方法与引入其它JS脚本文件一样
<script type="text/javascript" src="jquery-1.5.1.js"></script>
2. JQ中用$调用JQ中所有相关对象和DOM元素,例
<script type="text/javascript">
$(document).ready(function(){ //调用doucment对象下的ready方法
$("button").click(function(){ //调用DOM元素的方法,DOM元素可理解为html中的标签
$("p").hide();
});
});
</script>
三、JQ语法基础
1. $(selector).action()
//$表要使用JQ,用它可调用JQ中所有对象
//selector是选择符,指要操作的HTML元素,action()指要对选择符或元素执行的操作
例:
$(this).hide() //隐藏当前元素,this是内置关键字指当前元素
$("p").hide() //隐藏所有<p>,比JS方便JS中要遍历所有标签找到P标签
$(".test").hide() //隐藏所有class="test"的段落
$("#text").hide() //隐藏所有id="text"的元素,实际一个页面只有一个ID
2. 函数的相关载入,
一个网页结构加载完毕执行(注:只结构加载完,不是全部加载完),可执行多次,简写:$();
//定JQ代码前先写这句代码,先检查网页结构载入完成再执行,防止网速慢,JS未下载完就执行出错
语法:$(document).ready(function(){
要执行的代码
});
//类似window.onload,但后者要网页全部加载完(要等图片,视频等也加载完)毕后执行,一个页面只能执行一次,无简写
四、一些例子,注:JQ的触发脚本是写在JQ中,而JS触发脚本是写在html中的
例1:
<p id="uu">11111111111</p>
<p class="uu2">2222222222222222</p>
<p>3333333333</p>
<li>444444444444</li>
<button >按钮</buttion>
操作上面的代码
<script type="text/javascript">
$(document).ready(function(){ //用来保存JS代码,
//$(“p”).hide(); //隐藏网页所有P标签
//$(“li”).hide(); //隐藏所有li标签
//$(“#uu”).hide(); //隐藏id=uu
//$(“.uu”).hide(); //隐藏class=uu
$("button").click(function(){ //触发直接写在JQ中,点击时直接一个函数
$(".uu2").hide(); //获取uu2隐藏,也可以给按钮赋ID,点不同按钮执行不同操作
});
});
</script>