jQuery的基本知识

一 ，什么是jQuery？
jQuery 是一个函数库，一个 js 文件，在使用jQuery进行代码编写时，必须要引入jQuery函数库后进行编写。

二，jQuery的入口函数
我们在将获取元素的语句写到页面头部时，会因为元素还没有加载而出错， jQuery 提供了 ready 方法解决这个问题，它的速度比原生的window.onload 更快。

<script type="text/javascript">
 $(document).ready(function(){ ...... }); 
 </script>

可以简写如下：

jQuary(docunment).ready(function(){
});

//最精简的写法如下：
$(function(){
});

三、jQuery 选择器
jquery 选择器可以快速地选择元素，选择规则和 css 样式相同，使 用 length 属性判断是否选择成功。
$(document) //选择整个文档对象
$(‘li’) //选择所有的 li 元素
$(’#myId’) //选择 id 为 myId 的网页元素
$(’.myClass’) // 选择 class 为 myClass 的元素
$(‘input[name=first]’) // 选择 name 属性等于 first 的 input 元素
$(’#ul1 li span’) //选择 id 为为 ul1 元素下的所有 li 下的 span 元素
对选择集进行修饰过滤(类似 CSS 伪类)
$(’#ul1 li:first’) //选择 id 为 ul1 元素下的第一个 li
$(’#ul1 li:odd’) //选择 id 为 ul1 元素下的 li 的奇数行
$(’#ul1 li:eq(2)’) //选择 id 为 ul1 元素下的第 3 个 li
$(’#ul1 li:gt(2)’) // 选择 id 为 ul1 元素下的前三个之后的 li
$(’#myForm :input’) // 选择表单中的 input 元素 $(‘div:visible’) //选择可见的 div 元素
对选择集进行函数过滤
$(‘div’).has(‘p’); // 选择包含 p 元素的 div 元素
$(‘div’).not(’.myClass’); //选择 class 不等于 myClass 的 div 元素 $(‘div’).filter(’.myClass’); //选择 class 等于 myClass 的 div 元素
$(‘div’).first(); //选择第 1 个 div 元素
$(‘div’).eq(5); //选择第 6 个 div 元素
选择集转移
$(‘div’).prev(‘p’); //选择 div 元素前面的第一个 p 元素
$(‘div’).next(‘p’); //选择 div 元素后面的第一个 p 元素
$(‘div’).closest(‘form’); //选择离 div 最近的那个 form 父元素
$(‘div’).parent(); //选择 div 的父元素
$(‘div’).children(); //选择 div 的所有子元素
$(‘div’).siblings(); //选择 div 的同级元素
$(‘div’).find(’.myClass’); //选择 div 内的 class 等于 myClass 的元素
四、jQuery 样式操作
操作行间样式
$(“div”).css(“width”); $(“div”).css(“color”);// 获取 div 的样式
$(“div”).css(“width”,“30px”); $(“div”).css(“height”,“30px”); $(“div”).css({fontSize:“30px”,color:“red”});
选择器获取的多个元素，获取信息获取的是第一个，比如： $(“div”).css(“width”)，获取的是第一个 div 的 width。 操作样式类名
$("#div1").addClass(“divClass2”) //为 id 为 div1 的对象追加样式 divClass2 $("#div1").removeClass(“divClass”) //移除 id 为 div1 的对象的 class 名为 divClass 的样式
$("#div1").removeClass(“divClass divClass2”) //移除多个样式 $("#div1").toggleClass(“anotherClass”) //重复切换 anotherClass 样式
五、jQuery 属性操作
1. html() 取出或设置 html 内容

 var $htm = $('#div1').html(); // 设置 html 内容
  $('#div1').html('<span>添加文字</span>');

2. text() 取出或设置 text 内容

var $htm = $('#div1').text(); // 设置文本内容
  $('#div1').text('<span>添加文字</span>');

3. attr() 取出或设置某个属性的值
var $src = $(’#img1’).attr(‘src’); // 设置图片的地址和 alt 属性
$(’#img1’).attr({ src: “test.jpg”, alt: “Test Image” });
六、绑定 click 事件

$('#btn1').click(function()<br>{ 
// 内部的 this 指的是原生对象
 // 使用 jquery 对象用 $(this) })

七、jQuery 的特效效果及链式调用

 $btn.click(function(){ $('#div1').fadeIn(1000,'swing',function()
 { alert('done!'); }); });  

更多的样式效果和以上方法链式调用相似：
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
八、jQuery 动画
通过 animate 方法可以设置元素某属性值上的动画，可以设置一个或多个属性值。

$('#div1').animate({ width:300, height:300 },1000,swing,function()
{ alert('done!'); });