用户名:  密码:   
您当前的位置:首页 > 

106讲 JQ简介,下载,引入,调用语法,选择符,基础用法及例子

上次修改时间: 2016-04-14 09:38:13      来源:网络总结      作者:钢铁长陈
上一页      路径:DSD\Learn\javascript,ajax,jquery,dom\jQuery教程\PHP100视频教程jQuery部分\      下一页

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>