JQuery

JQuery不是w3c标准:
w3c标准:不是一个标准而是一系列标准的集合,
1:结构标准语言:XML,XML
2:表现标准语言:css
3:行为标准:DOM

Json对象 存储在键值对中{key:value}

$("p").empty();
把所有段落的子元素(包括文本节点)删除

JQuery中的hide函数:
$("p").hide();隐藏所有P元素
$(".t").hide():隐藏class="t"的元素
$("#t").hide():隐藏id="t"的元素

利用XPath表达式:
$("[href]"):选取带有href属性的元素
$("[href='#']"):选取所有href="#"的元素
$("[href!='#']"):选取所有href!=#的元素
$("[href$='.jpg']"):选取所有以.jpg结尾的元素


$(selector).click(function):将函数绑定到被选元素的点击事件上
$(selector).dbclick(function):将函数绑定到被选元素的双击事件上
$(selector).focus(function):将函数绑定到被选函数的焦点事件上
$(selector).mouseover(function):将函数绑定到元素的鼠标停留事件


同理$(selector).show()作用与其相反。

toggle()函数是来切换hide()和show()方法。

$(selector).toggle(speed,callback);
speed参数规定隐藏/显示的速度,可以取slow,fast,或者毫秒
callback参数是toggle()方法完成后所执行的函数
参数可选;

淡入淡出:
$(selector).fadeIn(speed,callback);
参数意义同上

$(selector).fadeOut(speed,callback);
参数意义同上

$(selector).fadeToggle(speed,callback);
如果元素已淡出,则fadeToggle()会向元素添加淡入效果
如果元素已淡入,则fadeToggle()会向元素添加淡出效果

$(selector).fadeTo(speed,opacity,callback);
必选参数opacity:是指淡入或者淡出的不透明度取值0~1


向下向上滑动元素:
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
同理slideToggle()方法:
如果元素向下滑动,则slideToggle()可向上滑动他们;
如果元素向上滑动,则slideToggle()可向下滑动他们;

$(selector).animate({params},speed,callback);
params定义形成动画的css属性

$("button").click(function){
$("div").animate({left:'250px'});
$("div").animate({width:'300px'});
});

stop()
$("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
可选stopAll参数规定是否应该清除动画队列,默认是false,
可选goToEnd参数规定是否立即完成当前动画,默认是false,


$(selector).hide(speed,callback)
callback参数是一个在hide操作后被执行的函数。
例如:$(selector).hide(1000,function(){
alert("the P is hide")})

chaining的技术:允许我们在相同的元素上运行多条jQuery语句。


-text()
设置或返回所选元素的文本内容
-html()
设置或返回所选元素的内容(包括html标记)
-val()
设置或返回 表单字段的值

-attr()
方法用于获取属性值。
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
-attr()也允许你同时设置多个属性。

<b>添加</b>
-append()
在被选元素的结尾插入内容
-prepend()
在被选元素的开头插入内容
-after()
在被选元素之后插入内容
-befor
在被选元素之前

在图像的前后插入得用after和before,


remove()--删除被选元素(及其子元素)
empty()--从被选元素中删除子元素


addClass()方法向元素添加类
removeClass()移除类
toggleClass()切换(移除和添加之间)

返回指定的css属性的值,请使用如下语句:
$("p").css("propertyname");
如果有多个p那就只返回第一个P的css属性

如果设置指定的css属性:
css("propertyname","value");

如果想设置多个css属性:
$("p").css({"backgroud-color":"yellow","font-size":"200%"});

尺寸:
width()方法 设置或返回元素的宽度(不包括内边距和外边距,边框)
height()方法设置或返回元素的高度(不包括内边距和外边距,边框)
innerWidth()方法返回元素的宽度(包括内边距)
innerHeight()方法返回元素的高度(包括内边距)
outerWidth()方法返回元素的宽度(包括内边距和边框)


通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历

parent()方法返回被选元素的直接父元素
parents()方法返回被选元素的所有祖先元素,一直到跟元素
parents("ul")返回被选元素的所有祖先元素,并且还要是ul
parentsUntil()方法返回介于两个给定元素之间的所有祖先元素
$("span").parentsUtil("div")就是返回span与其父类div之间的祖先元素(如果有两个div就从最近的div算起)


children()方法返回被选元素的所有直接子元素
该方法只会向下一级对DOM树进行遍历
$("div").children("p.1");(精确查找)
该表示返回类名为“1”的所有<p>元素,并且它们是<div>的直接子元素。

find()方法返回被选元素的后代元素
$("div").find("span")返回<div>后代的所有<span>元素
$("div").find("*")返回<div>的所有后代


siblings()方法返回被选元素的所有同胞
也可以可选参数来过滤同胞元素
$("h2").siblings("p")

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

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

同理有prev() prevALl()以及prevUntil()方法


缩写搜索元素的范围:
三个最基本的过滤方法:first(),last()和eq()
first()方法返回被选元素的首个元素:
last()方法返回被选元素的最后一个元素:
eq()方法返回被选元素中带有指定索引号的元素:(下标从0开始)
$("p").eq(3).css("backgroud-color","yellow");
P元素的第二个元素:

filter()方法允许您规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
如返回类名为intro的所有P元素
$("p").filter(".intro");
not()与filter()方法相反


AJAX
=Asynvhronous JavaScript and XML
(异步js和xml)
$(selector).load(URL,data,callback);
必需的URL参数规定您希望加载的URL
可选的data参数规定与请求一同发送的查询字符串键/值对集合
可选的callback参数是load()方法完成后所执行的函数名称

$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
})


HTTP请求:GET和POST
GET:从指定的资源请求数据(可能返回缓存数据)

$.get(URL,callback);
URL:必选的URL地址
callback参数是请求成功后所执行的函数名称
POST:向指定的资源提交要处理的数据(不会返回缓存数据)
$.get("/example/jquery/demo_test.asp",function(data,status){
      alert("数据:" + data + "\n状态:" + status);
    });

$.post(URL,data,callback);
必选的URL
可选的data参数规定连同请求发送的数据
可选的callback参数是请求成功后所执行的函数名
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});


noconflict()方法会释放对$标示符的控制,你也可以自己定义控制
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行!");
  });
});


$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在运行!");
  });
});

tap事件用户轻击一个元素的时候触发
相当于click

上例中,noConflict()方法后,要想使用就必须定义在方法中才能使用。

ol标签是有序列表。
start:number,开始<ol start="7">
type:(1 A a I i) <ol type="I">
reversed:<ol reversed>降序目前只有chrome和safari6支持reversed
compact属性规定列表呈现的效果比正常情况更小巧一些,通过减小行间距和对列表进行缩进





































你可能感兴趣的:(jquery)