首页 > Web开发 > 详细

jQuery

时间:2016-02-01 19:04:41      阅读:252      评论:0      收藏:0      [点我收藏+]

jquery是JavaScript的一个库,

选择器

  选择页面的元素,分为: id选择器,类选择器,标签选择器,属性选择器

   $("#myDiv");   //选择id值为myDiv的页面元素
   <div id="notMe"><p>id="notMe"</p></div>
   <div id="myDiv">id="myDiv"</div>
   
   $(".myClass");//选择class值为myClass的页面元素
   <div class="notMe">div class="notMe"</div>
   <div class="myClass">div class="myClass"</div>
   <span class="myClass">span class="myClass"</span>
   
   $("div");//标签为div的页面元素
   <div>DIV1</div>
   <div>DIV2</div>
   <span>SPAN</span>
   
   $("[href]") 选取所有带有 href 属性的元素。
   $("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
      $("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
      $("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
      
      
      $("ul li:first")	每个<ul>的第一个<li>元素
      $("div#intro .head")id="intro" 的<div>元素中的所有 class="head" 的元素

 事件方法:

$(document).ready(function)	 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)	 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	 触发或将函数绑定到被选元素的鼠标悬停事件
$(selector).on("click",function) 绑定事件处理程序到当前选定的jQuery对象中的元素

    隐藏和显示

    $(selector).hide(speed,callback);//隐藏
        $(selector).show(speed,callback);//显示
        隐藏和显示合二为一则为:
    $("button").click(function(){        
       $("p").toggle(1000);//隐藏或显示,参数为1000毫秒
    });

    淡入淡出

    $(selector).fadeIn(speed,callback);//淡入
    $(selector).fadeOut(speed,callback);//淡出
    $(selector).fadeToggle(speed,callback);//淡入或淡出 
    $(selector).fadeTo(speed,opacity,callback);//渐变为给定的透明度(值为0与1之间)

    滑动  

        $(selector).slideDown(speed,callback);//向下滑动
        $(selector).slideUp(speed,callback);  //向上滑动
        $(selector).slideToggle(speed,callback);//向上或向下滑动

    动画 

        $(selector).animate({params},speed,callback);
        $("button").click(function(){  // 将left属性修改为250px, 向右滑动 
            $("div").animate({left:‘250px‘});//可以形成队列, 实现连续改动
        });

   终止效果

       $(selector).stop(stopAll,goToEnd);

 以上的callbask函数,是在整个动画100%执行完以后会执行的函数.

    

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>

获取页面的内容

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

    html() - 设置或返回所选元素的内容(包括 HTML 标记)

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

设置页面的内容    

    text("Hello world!") - 设置或返回所选元素的文本内容

    html("Hello world!") - 设置或返回所选元素的内容(包括 HTML 标记)

    val("Hello world!") - 设置或返回表单字段的值


本文出自 “QinGuan” 博客,请务必保留此出处http://11083953.blog.51cto.com/11073953/1740435

jQuery

原文:http://11083953.blog.51cto.com/11073953/1740435

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!