初学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