jquery

1、jquery语法:
通过jquery可以选取(查询,query)HTML元素,并对他们执行"操作"(actions)。
实例:
 $(this).hide();隐藏当前的HTML元素。
 $("#test"),hide();隐藏id="test"的元素。
 $("p").hide();隐藏所有<p>元素。
 $(".test").hide();隐藏所有class="test"的元素
在实例中的所有jQuery函数位于一个document ready函数中:
$(document).ready(function(){});这是为了防止文档在完全加载(就绪之前运行jQuery代码。如果在文档加载之前就运行函数,操作可能失败,
2、jquery选择器:
jQuery元素选择器和属性选择器允许通过表签名、属性名或内容对HTML元素进行选择。选择器允许对HTML元素组或单个元素进行操作。
在HTML DOM()术语中:选择器允许对DOM元素族或单个DOM节点进行操作。
 jQuery元素选择器:
 jQuery使用css选择器来选取HTML元素。
 $("p")选取<p>元素。
 $("p.intro")选取所有class="intro"的<p>元素。
 $("p#demo")选取所有id="demo"的<p>元素。
 jQuery属性选择器:
 jQuery使用XPath表达式来选择带有给定属性的元素。
 $("[href]")选取所有带有href属性的元素。
 $("[href='#']")选取所有带有href值等于"#"的元素。
 $("[href!='#']")选取所有带有href值不等于"#"的元素。
 $("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
 jQuery CSS选择器:
 jQuery CSS 选择器可用于改变HTML元素的CSS属性。
 $("p").css("background-color","red");
更多的选择器实例:

语法                        描述
$(this)                     当前 HTML 元素
$("p")                      所有 <p> 元素
$("p.intro")                所有 class="intro" 的 <p> 元素
$(".intro")                 所有 class="intro" 的元素
$("#intro")                 id="intro" 的第一个元素
$("ul li:first")            每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")         所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")        id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery事件:
jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件"触发"或"激发"经常会被使用。
eg:
<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
  $("button").click(function(){
   $("p").hide();
  });
 </script>
</head>
<body>
 <h2>This is a heading</h2>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
 <button>Click me</button>
</body>
</html>
在上面的例子中,当按钮的点击事件被触发时会调用一个函数,该方法隐藏所有的<p>元素。
更多的jQuery事件:

Event 函数                               绑定函数至
$(document).ready(function)              将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)              触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)           触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)              触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)          触发或将函数绑定到被选元素的鼠标悬停事件

jQuery效果
1、隐藏和显示:通过jQuery可以使用hide()和show()方法来隐藏和显示HTML元素:
 eg:$("#hide").click(function(){
  $("p").hide(); 
     });
     $("#show").click(function(){
  $("p").show(); 
     });
     语法:$(selector).hide(speed,callback);$(selector).show(speed,callback);
     可选的speed参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast"、或毫秒。
     可选的callback参数是隐藏或显示完成后所执行的函数名称。

     可以属于哪个jQuery的toggle()方法来切换hide()和show()方法。
     显示被隐藏的元素,隐藏已显示的元素:
 eg: $("button").click(function(){
    $("p").toggle();
     });
     $(selector).toggle(speed,callback);其参数和show()方法的参数是一样的。
2、淡入和淡出:http://www.w3school.com.cn/jquery/jquery_fade.asp
 jQuery fadeIn()用于淡入已隐藏的元素。
 jQuery fadeOut()用于淡出已可见元素。
 jQuery fadeToggle()可以在fadeIn()与fadeOut()方法之间进行切换。
  如果元素已淡出,则fadeToggle()会向元素添加淡入效果。
  如果元素已淡入,则fadeToggle()会向元素添加淡出效果。
 jQuery fadeTo()方法允许渐变为给定的不透明度(值介于0与1之间)。
 语法:  $(selector).fadeIn(speed,callback);
  $(selector).fadeOut(speed,callback);
  $(selector).fadeToggle(speed,callback);
  可选的speed参数规定效果的时长。它可以取以下值:"slow","fast"或毫秒。
  可选的callback参数是fading完成后所执行的函数名称。
  eg:$("button").click(function(){
     $("#div1").fadeToggle();
     $("#div2").fadeToggle("slow");
     $("#div3").fadeToggle(3000);
  });
  $(selector).fadeTo(speed,opacity,callback);
  必需的speed参数规定效果的时长。它可以取以下值:"slow","fast"或毫秒。
  fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度(值介于0与1之间)。
  可选的callback参数是该函数完成后所执行的函数名称。
   eg:$("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
   });
3、滑上和滑下:http://www.w3school.com.cn/jquery/jquery_slide.asp
 jQuery slideDown()方法用于向下滑动元素。
 jQuery slideUp()方法用于向上滑动元素。
 jQuery slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。
  如果元素向下滑动,则slideToggle()可向上滑动它们。
  如果元素向上滑动,则slideToggle()可向下滑动它们。
 语法:$(selector).slideUp(speed,callback);
 $(selector).slideDown(speed,callback);
 $(selector).slideToggle(speed,callback);
 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
 可选的 callback 参数是滑动完成后所执行的函数名称。
4、jQuery 效果 - 动画:http://www.w3school.com.cn/jquery/jquery_animate.asp

jQuery获得内容和属性:http://www.w3school.com.cn/jquery/jquery_dom_get.asp
jQuery DOM操作:jquery中非常重要的部分,就是操作DOM的能力。
(DOM=Document Object Model  文档对象模型)
获得内容-text()、html()、val()
三个简单实用的用于DOM操作的jQuery方法:
 text()-设置或返回所选元素的文本内容。
 html()-设置或返回所选元素的内容(包含html标记)
 val()-设置或返回表单字段的值
 eg:
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("#btn1").click(function(){
    alert("Value: " + $("#test").val());
  });
获取属性-attr()
 eg:$("button").click(function(){
   alert($("#w3s").attr("href"));
 });
设置内容和属性:http://www.w3school.com.cn/jquery/jquery_dom_set.asp
设置内容-text()、html()、val()
 eg:
 $("#btn1").click(function(){
   $("#test1").text("Hello world!");
 });
 $("#btn2").click(function(){
   $("#test2").html("<b>Hello world!</b>");
 });
 $("#btn3").click(function(){
   $("#test3").val("Dolly Duck");
 });
text()、html()、val()的回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回希望使用的字符串。
eg:
 $("#btn1").click(function(){
   $("#test1").text(function(i,origText){
     return "Old text: " + origText + " New text: Hello world!
     (index: " + i + ")";
   });
 });
设置属性-attr()用于设置/该表属性值。
eg:
 $("button").click(function(){
   $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
 });
 attr()方法同时设置多个属性:
 $("button").click(function(){
   $("#w3s").attr({
     "href" : "http://www.w3school.com.cn/jquery",
     "title" : "W3School jQuery Tutorial"
   });
 });

jQuery加载
jQuery load()方法是简单但强大的AJAX方法。load()方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的URL参数规定希望加载的URL。
可选的data参数规定与请求一同发送的查询字符串键/值对集合。
可选callback参数是load()方法完成后所执行的函数名称。回调函数可以设置不同的参数:
responseTxt-包含调用成功时的结果内容。
statusTxt-包含调用的状态。
xhr-包含XMLHttpRequest对象

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值