JQuery 操作指南_1
$(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数,隐藏所有 <p> 元素。 $(".test").hide() 演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
文档就绪函数
$(document).ready(function(){ // jQuery functions go here });
jquery元素选择器:
CSS选择器
$("p") 选取所有<p>元素 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("p#demo") 选取所有 id="demo" 的 <p> 元素。
Xpath选择器
$("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
实例
$("p").css("background-color","red"); 这个是将所有的<p>标签的背景改成红色
jquery 事件函数
.toggle() .show()和.hide()之间进行切换的
.fadeIn() 淡入
.fadeOut() 淡出
.fadeToggle() 淡入淡出之间进行切换 这里面都可以设置时间
.fadeTo() 设置不透明值 比如:设置id为div1这个元素的不透明值为0.15,速度为slow $("#div1").fadeTo("slow",0.15);
.slideDown() 向下滑动
.slideUp() 向上滑动
.slideToggle() 两者交叉替换
.animate({left:'250px'}); 动画设置
var div=$("div"); 队列操作
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
alert("谢谢你,Hello World!"); 弹出一个提示框
<html> <head> <script type="text/javascript" src="jquery.js"></script> // 导入jquery这个js <script type="text/javascript"> $(document).ready(function(){ //文档就绪函数 $("button").click(function(){ //元素选择器 这里单击button就会触发p元素的.hide()事件,也就是所有的p消失 $("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>
鼠标事件
$(selector).click(function) 点击事件
$(selector).dblclick(function) 双击事件
$(selector).focus(function) 获得焦点事件
$(selector).mouseover(function) 鼠标悬停时触发
多个事件一起执行
//这里首先将字体的颜色设置为红色,然后这个id值为#p1的标签向上收,之后再向下出来
//显示id值为#test里面的文字信息
// 显示输入在一个id为test的input的值
attr 获取属性值的 这里 //显示出href的链接地址的值