Fork me on GitHub

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的链接地址的值 

 

posted @ 2022-09-19 11:48  小百天  阅读(19)  评论(0编辑  收藏  举报