JQuary初识(1)

引入jQuery   getElementById("1")   可以写成 $("#=2")前提是后面的id为<h id="2">
<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);

</script>


如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>


http://jquery.com/download/#Download_jQuery    一个很强大的jquery网站


(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
$("p").hide()
演示 jQuery hide() 函数,隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。


jQuery元素选择器    $("p.intro")    选取class=intro的元素
jQuery属性选择器    $("[href='.jpg']")    选取所有href值以".jpg"结尾的元素

$(document).ready(function{$("")})    是为了完全加载玩了在运行避免错误

jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中

当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的文件中会更好

当$有冲突时可用  var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。


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

$(document).ready(function(){
            $("button").click(function{
                    $("p").toggle(500);
                        });
                });                toggle切换显示或者隐藏

$(selector).fadeIn(speed,callback);不显示        speed="slow "    ||    speed=1000    callback还可以在接一个函数
fadeOut    显示    fadeToggle    fadeTo    淡化至原来的0.x    $(target).fadeTo("slow",0.4);        一般与<div id="">连用

slideDown()    slideUp()    slideToggle(speed,callback)    滑动

默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

$(target).animate({params},speed,callback)
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。


$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.21',            淡化!!!
      height:'+=150px',            也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
      width:'hide'        使用预定值:您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
    });
  });
});


$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});            动画的连续播放            {params}内若要连续进行动画的话用,隔开


$("div").stop()            停止当前动画,但后面的会继续执行
$("div").stop(true)        停止所有动画
$("div").stop(true,ture)    停止所有动画并完成最后的位置

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);    链接    省了很多空间


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值