jQuery学习笔记

什么是 jQuery ？

jQuery是一个轻量级的”写的少，做的多”的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery的优缺点

　　优点:

　　　　　　代码量低,语法简洁.

　　　　　　兼容性好(兼容ie6<版本1.x>以上所有主流浏览器), Google 和 Microsoft 对 jQuery 十分友好可以通过以下方式引入jQuery库.

　　　　　　Ajax异步操作方便且兼容性好.

<!--Google-->
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
<!--Microsoft-->
<head>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jque
ry /jquery-1.4.min.js"></script> 
</head>

　　　　缺点:

　　　　　　　　代码量较多时,可能带来可维护性和重用冲突的问题.比如jQuery中常用的$符号在其他库里也有,同时引用了可能会发生冲突.

jQuery的基本语法

　　$(selector).action()

美元符号定义 jQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

jQuery选择器

　　jQuery选择器可以选择属性和元素

　　语法:

/*元素*/
$("#test")
$(".test")
$("p")
/*jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性*/
$("p").css("background-color","red");

/*属性*/
$("[href]")

jQuery常用事件　

　文档就绪事件

　　写jQuery函数必须包含该事件,意为文档加载后执行jQuery代码(解决了一些未知的bug)

　语法:

 $(document).ready(function(){

   // 开始写 jQuery 代码...

 }); 
/*简洁写法*/
$(function(){

   // 开始写 jQuery 代码...

 });

　　点击事件

　　　　click() 方法是当按钮点击事件被触发时会调用一个函数

　　语法:

$("p").click(function(){ 
  $(this).hide(); 
});

　　双击事件

　　　　dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

　　语法:

$("p").dblclick(function(){ 
  $(this).hide(); 
});

　　鼠标事件

　　　　使用方法:$(“某元素”).鼠标事件(function(){}); //function()是前文提到的文档就绪事件

　　　　mouseenter() : 鼠标移入事件

　　　　mouseleave() : 鼠标移出事件

　　　　mousedown() : 鼠标按下事件

　　　　mouseup() : 鼠标按钮松开事件

　　　　hover() : 悬停事件

　　　　focus() : 聚焦事件

　　　　blur() : 失焦事件

　　语法:

<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>

　　键盘事件

keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外）
keypress：在键盘上按下某键时发生,若一直按着某按键则会不断触发
keyup：用户松开某一个按键时触发，与keydown相对

jQuery效果

　　隐藏和显示

　　　　语法:　　

　　　　　　可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

　　　　　　可选的 callback 参数是隐藏或显示完成后所执行的函数名称,即回调函数。

　　　　　　$(selector).hide(speed,callback);

　　　　　　$(selector).show(speed,callback);

$(selector).toggle(speed,callback) //元素隐藏时,调用方法元素显示;元素显示时,调用方法元素隐藏

　　淡入淡出

　　作用于隐藏显示的效果

　　　　语法:

　　　　　　$(selector).fadeIn(speed,callback);

　　　　　　$(selector).fadeout(speed,callback);

　　　　　　$(selector).fadetoggle(speed,callback); //类似于上例的toggle

　　　　　　$(selector).fadeTo(speed,opacity,callback) //自定义淡入淡出效果,opecity : 透明度(淡入淡出最终达到的透明效果)

　　滑动

　　　　语法:

　　　　　　$(selector).slideDown(speed,callback) //下滑

　　　　　　$(selector).slideUp(speed,callback) //上滑

　　　　　　$(selector).slideTiggle(speed,callback)

　　动画

　　　　语法:

　　　　　　$(selector).animate({params},speed,callback) //必需的 params 参数定义形成动画的 CSS 属性

　　　　　　$(selector).stop(stopAll,goToEnd)

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

　　　　　　　　　　　　　　　　　　　　　　可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

　　　　注:动画采用队列方式,多个动画会逐个调用,属性的动画值可以使用show,hide,toggle参数.

　　　　示例:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery HTML

　　jQuery Dom

　　　　获得内容:

　　　　　　　　text() – 设置或返回所选元素的文本内容

　　　　　　　　html() – 设置或返回所选元素的内容

　　　　　　　　val() – 设置或返回表单字段的值

　　语法:

$("#test").text()       //返回内容
$("#test1").text("Hello world!")       //设置内容

//回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

$("#test1").text(function(i,origText){ 
    return "Old text: " + origText + " New text: Hello world!(index: " + i + ")"})

//对当前元素下标的解释,定义一个"A"类

<p class="A">a1</p>   //下标为0

<p class="A">a2</p>   //下标为1

<p class="A">a3</p>　　//下标为2

　　　　获得属性:

　　　　　　　　attr() 方法用于获取属性值

　　语法:

$("#Cat").attr("href")　　　　//获取属性值
$("#Cat").attr("href","https://www.cnblogs.com/Lazy-Cat/")　　　　//设置属性
$("#Cat").attr("href", function(i,origValue){ 
    return origValue + "/jquery"; 
  }); 　　　　//回调函数

　　jQuery添加删除元素

　　语法:

　　　　$(“p”).append(“Some appended text.”);　　　　//在被选元素内部的结尾插入指定内容

　　　　$(“p”).prepend(“Some prepended text.”)　　　　//在被选元素内部的开头插入指定内容

　　　　$(“img”).after(“在后面添加文本”)　　　　//在被选元素之后插入内容

　　　　$(“img”).before(“在前面添加文本”)　　　　//在被选元素之前插入内容

　　　　$(“#div1”).remove()　　　　//删除被选元素及其子元素

　　　　$(“#div1”).empty()　　　　//删除被选元素的子元素

jQuery CSS

　　语法:

　　　　$(“#div1”).addClass(“important blue”)　　　　//向被选元素添加一个或多个类

　　　　$(“h1,h2,p”).removeClass(“blue”)　　　　//从被选元素删除一个或多个类

　　　　$(“h1,h2,p”).toggleClass(“blue”)　　　　//对被选元素进行添加/删除类的切换操作

　　　　css(“propertyname“,”value“)　　　　//设置CSS属性

css({"propertyname":"value","propertyname":"value",...});

jQuery 返回宽高

　　　　width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

　　　　height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

　　　　innerWidth() 方法返回元素的宽度（包括内边距）

i　　　　nnerHeight() 方法返回元素的高度（包括内边距）

　　　　outerWidth() 方法返回元素的宽度（包括内边距和边框）

　　　　outerHeight() 方法返回元素的高度（包括内边距和边框）

　　语法:

$("#div1").width();

jQuery遍历

　　向上级遍历

　　　　parent() 方法只返回被选元素的直接父元素

　　　　parents() 方法返回被选元素的所有上级元素，它一路向上直到文档的根元素 (<html>)

　　　　parentsUntil() 方法返回介于两个给定元素之间的所有上级元素

　　语法:

$("span").parent()'
$("span").parents("ul");
$("span").parentsUntil("div");

　　向下级遍历

　　　　children() 方法返回被选元素的所有直接子元素

　　　　find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

　　　　//语法与上级遍历一样

　　同级遍历

　　　　siblings() 方法返回被选元素的所有同胞元素

　　　　next() 方法返回被选元素的下一个同胞元素

　　　　nextAll() 方法返回被选元素的所有跟随的同胞元素

　　　　nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

　　　　prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

　　　　//语法与上级遍历一样

jQuery Ajax

　　语法:

　　　　$(selector).load(URL,data,callback)　　　　//从服务器加载数据，并把返回的数据放入被选元素中

　　　　必需的 URL 参数规定您希望加载的 URL

　　　　可选的 data 参数规定与请求一同发送的查询字符串键/值对集合

　　　　可选的 callback 参数是 load() 方法完成后所执行的函数名称

$("#div1").load("demo_test.txt");

　　　　$.get(URL,callback)　　　　//通过 HTTP GET 请求从服务器上请求数据

　　　　必需的 URL 参数规定您希望请求的 URL。

　　　　可选的 callback 参数是请求成功后所执行的函数名。

  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });

　　　　$.post(URL,callback)　　　　//通过 HTTP POST 请求从服务器上请求数据