初学jquery

jquery是什么?

   jquery是一个js框架,其主要思想是通过选择器查找到对应的节点,然后对这个节点进行封装,通过调用jquery对象的属性或者方法来实现对节点的操作。这样做的好处是:

   (1)将不同浏览器之间的差异屏蔽起来了。

   (2)代码更加啊简洁,维护方便。

1.基本语法

  $(selector).action()

  $:用来定义jquery

 selector:选择符,查询和查找html元素。

 action:对元素执行的操作。

实例:

  $(this).hide()---------隐藏当前元素

  $("p”).hide()---------隐藏所有的p元素

  $("#id”).hide()-------隐藏id=ID的元素

  $("p.a").hide()--------隐藏class=a的P  

  $(document).ready(function)(){……})

2.选择器通过属性选择元素

  $("[href]")----选择所有具有href属性的元素

  $("[href=‘aa’]")----选择所有href='aa'的元素

  $("[href!='aa']")----选择所有href!='aa'属性的元素

  $("[href$=''.jpg]")----选择所有href值以.jpg结尾的元素

3.选择器选择Css属性

  $("p").css("background-color","red");修改所有的p元素的背景颜色为红色

  $("div#ID.a") id=ID的div元素中所有class=a的元素

4.名称冲突

 var jQMy=jQuery.noConflict() 用jQMy代替$

5.常用事件

  $(document).ready(function)---------文档的就绪事件

  $(selector).click(function)-------------被选元素的点击事件

  $(selector).dblclick(function)----------被选元素的双击事件

  $(selector).focus(function)------------被选元素获得焦点事件

  $(selector).mouseover(function)-------被选元素鼠标悬停事件

6.jquery效果

   $(selector).hide()---------------隐藏被选元素

   $(selector).show()--------------显示被选元素

   $(selector).hide()---------------切换(在隐藏和显示之间)被选元素

   $(selector).slideDown()---------向下滑动(显示)被选元素

   $(selector).slideUp()------------向上滑动(隐藏)被选元素

   $(selector).slideToggle()--------对被选元素切换向上滑动和向下滑动

   $(selector).fadeIn() ------------淡入被选元素

   $(selector).fadeOut() ----------淡出被选元素

   $(selector).fadeTo() -----------把被选元素淡出为给定的不透明度

   $(selector).animate()----------- 对被选元素执行自定义动画

回调函数:callback

  $("p").hide(1000,function(){

     alert("the paragreph is now hidden");

})

7.jquery的html操作

  $(selector).html(content)------改变被选元素的内部html

  $(selector).append(content)------向被选元素的内部html追加内容

  $(selector).prepend(content)----- 向被选元素的(内部)HTML “预置”(Prepend)内容

  $(selector).after(content) --------在被选元素之后添加 HTML

  $(selector).before(content)-------在被选元素之前添加 HTML

 

 

 

posted @ 2013-06-26 10:48  gexiaomin  阅读(155)  评论(0编辑  收藏  举报