jQuery 学习笔记

 
问题
回答
文档就绪事件
$(document).ready( funA )
或者
$( funcB )
标签被点击
$("p").click( funB ) ;
安装jQuery
1 本地嵌入  <script src="jquery-1.10.2.min.js"></script>
2 用CDN  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
隐藏当前元素
$(this).hide();
隐藏所有 <p> 元素
$("p").hide();
隐藏所有 class="test" 的 <p> 元素
$("p.test").hide();
隐藏所有 id="test" 的元素
$("#test").hide();
所有带有 class="test" 属性的元素都隐藏:
$(".test").hide();
选取第一个 <p> 元素
$("p:fisrt")
选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first")
选取每个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")
选取带有 href 属性的元素
$("[href]")
选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target='_blank']")
选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")
选取所有 type="button" 的 <input> 元素 和 <button> 元素
$(":button")
选取偶数位置的 <tr> 元素
$("tr:even")
选取奇数位置的 <tr> 元素
$("tr:odd")
单击方法
click
双击方法
dblclick
穿过元素
mouseenter
鼠标指针离开元素
mouseleave
鼠标指针移动到元素上方  并按下鼠标按键时
mousedown
松开鼠标按钮
mouseup
于模拟光标悬停事件
hover( funA, funB ) ;
当元素获得焦点时
focus
当元素失去焦点时
blur
hide show 
$(selector).show(speed,callback);
speed可取 slow fast 或毫秒数
切换显隐
toggle()
淡入淡出效果
fadeIn() 可取 slow fast 毫秒数
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
滑动效果
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
动画
$("div").animate({left:'250px'}); 向右面移动250像素
使用相对值:   +=150px
使用预定值:    height:'toggle'
可队列执行
停止动画
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
chaining动画
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
获得内容
text() html() val()
获取属性
$("#id").attr("href");
设置内容
text() html() val() 
text()、html() 以及 val() 的回调函数
 $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });
设置属性
$("#id").attr("href","www.baidu.com") ;
attr的回调函数
$("#id").attr("href", functionA ) ;
 Create text with HTML
var txt1="<p>Text.</p>";
 Create text with jQuery
var txt2=$("<p></p>").text("Text.");
 Create text with DOM
var txt3=document.createElement("p");
txt3.innerHTML="Text.";     
在被选元素的结尾插入内容
apend(), 可传入多个元素
 在被选元素的开头插入内容
prepend 
在被选元素之后插入内容
after
在被选元素之前插入内容
before
删除被选元素(及其子元素)
$("p").remove();
删除被选元素的子元素。
$(":p").empty();
过滤删除
$(":p").remove(".italic");
向被选元素添加一个或多个类
addClass 
从被选元素删除一个或多个类
removeClass
对被选元素进行添加/删除类的切换操作
toggleClass( "blue" )
返回首个匹配元素的 background-color 值
$("p").css("background-color")
设置多个 CSS 属性
$("p").css({"background-color":"green", "font-size":200%} ) ;
$("p").css("height": "500px" ) ;
padding border margin 的意义
 
innerWidth
width + padding * 2 ;
outerWidth()
width _ padding * 2 + border * 2 
outerWidth(true)
width _ padding * 2 + border * 2 + margin * 2 ;
返回被选元素的直接父元素
parent();
返回被选元素的所有祖先元素
parents();
返回介于两个给定元素之间的所有祖先元素 
$("span").parentsUntil("div")
被选元素的所有直接子元素
$("div").children();
返回类名为 "blue" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
$("div").children("p.blue") ;
返回被选元素的后代元素,一路向下直到最后一个后代, 找到所有
$("div").find("span");
返回 <div> 的所有后代
$("div").find("*");
什么是同胞
有相同的父元素
返回被选元素的所有同胞元素
$("div").siblings();
返回属于 <h2> 的同胞元素的所有 <p> 元素
$("h2").siblings("p");
返回被选元素的下一个同胞元素
$("h2").next();   // prev
返回被选元素的所有跟随的同胞元素
$("h2").nextAll();  // prevAll(); 
返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").nextUntil("h6") 不包含h6 // prevUntil();
选取首个 <div> 元素内部的第一个 <p> 元素
$("div p").fisrt();
选择最后一个 <div> 元素中的最后一个 <p> 元素
$("div p").last();
选取第四个 <p> 元素
$("p").eq(3);
返回带有类名 "intro" 的所有 <p> 元素
$("p").filter(".intro");
返回不带有类名 "intro" 的所有 <p> 元素
$("p").not(".intro");
Ajax load语法
$("div").load("test.txt");
$(selector).load(URL,data,callback);
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){});
把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中
$("div0").load( "demo_text.text #p1 ) ;
post  和 get 方法
 $.post("/try/ajax/demo_test_post.php",
    {
      name:"Donald Duck",
      city:"Duckburg"
    },
    function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
释放会 $ 标识符的控制,这样其他脚本就可以使用它了
$.noConflict();
noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用
var myJQ = $.noConflict();
$的另一种写法
jQuery
JSONP 
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {});
class 为 "intro" 或 "demo" 的所有元素
$(".intro,.demo")
生成被选元素的副本
检查被选元素是否包含指定的 class 名称
返回被选元素相对于文档的偏移坐标
offset()
返回元素的位置(相对于父元素)
设置或返回被选元素的水平滚动条位置
设置或返回被选元素的垂直滚动条位置
$.param( obj ) 的作用
序列化一个 key/value 对象:

var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);
结果:
width=1680&height=1050
 
 
 
 
 
 
 
 
 
 
posted @ 2019-01-27 20:39  jason_xiao  阅读(88)  评论(0编辑  收藏  举报