jQuery学习笔记1——入门

最新推荐文章于 2024-01-20 21:49:50 发布

dxylilac

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量510

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u010484625/article/details/45217261

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端的东西学起来简单，但是太容易忘了，学习的过程中记录一下，方便复习。

1. jQuery是js的库，封装了一些功能，简化了js编程

2. 需要通过script标签添加jQuery的库

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

3. 操作广泛：可以对DOM元素组或者单个DOM节点进行操作；可以操作html的元素；使用xPath选择器对某一类的属性进行操作；也可以修改CSS

$(this) 对当前元素的操作

$("p") 对所有段落的操作

$(".test") 对 class="test" 的操作

$("#test") 对 id="test" 的操作

上述操作也可以结合使用：

$("p.intro") 对 class="intro" 的<p>元素操作
$("p#intro") 对 id="intro" 的<p>元素操作

还可以通过属性选择器选择某一类属性：

$("[href]") 选取含有href属性的元素

$("[href='#']") 选取 href的值为'#'的元素

$("[href$='.jpg']") 选取href值以.jpg结尾的元素

4. jQuery函数位于文档就绪函数中，防止文档在完全加载之前就运行jQuery函数。

$(document).ready(function(){

--- jQuery functions go here ----

});

5. 由于 jQuery 是为处理 HTML 事件而特别设计的，因此所有 jQuery 代码置于事件处理函数中，事件处理函数一般放在<head>，

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

6. 如果存在名称冲突，则重命名 jQuery 库，noConflict。

var ab=jQuery.noConflict() 可以使用ab代替$

7. jQuery有一些效果显示和隐藏，可以使用hide()来隐藏，也可以使用show()来显示；也可以使用toggle()，可以根据原本的显示或者隐藏来选择显示或者隐藏；添加参数可以调节隐藏、出现的速度，可以用slow，fast，normal或者数值来作为参数，例如

$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle("slow");
  });
});

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle(3000);
  });
});
</script>

其中的3000表示处理这个效果需要的时间为3000ms。

在动画结束之后，往往会去执行下一步的操作，为了保证下一步的操作是在效果结束之后执行而不是在效果执行期间执行，定义了callback函数，规定在效果执行之后执行的函数需要通过callback调用：

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle("slow",function(){
		alert("The function is called");
		});
  });
});
</script>

另外，还有其他的效果

fadeIn(), fadeOut(), fadeToggle() 实现元素的淡入淡出，与show(), hide(), toggle()的用法是相同的，区别在于前者的淡入淡出是整体的淡入淡出，而后者是从左上角到右下角的出现，从右下角到左上角的退出，当设置了出现或者消失的时长之后就可以看出差别；不知道normal，slow，fast的时长，都比默认参数（即什么都不写）慢，这三个钟fast最快，slow最慢。

slideDown(), slideUp(), slideToggle()实现元素的上下滑动，用法与上述用法相同；

8. animate()实现自定义动画

<script>
$(document).ready(function(){
  $("#test2").click(function(){
    $("h1").animate({left:'500px'});
  });
});
</script>

需要注意的一点是，操作元素的position属性需要设置成relative、fixed 或 absolute。

animate可以操作多个属性，通过多个属性的定义，描述动画之后的形状和位置；animate可以操作几乎所有的css属性，然而必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是margin-right，等等。

色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，需要从 jQuery.com 下载 Color Animations 插件。这个我还没有尝试过，用的时候再说吧。

也可以定义相对值，下面是W3C的一段代码：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

下面是使用toggle()：

<html>
<head>
<script src="jquery/jquery-1.11.2.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("h1").animate({
      height:'toggle'
    });
  });
});
</script>
</head>
<body>
<button type="button">click me1</button>
<h1 style="position:absolute;";>test animate</h1>
</body>
</html>

使用队列也可以产生有趣的效果，如下所示：

<html>
<head>
<script src="jquery/jquery-1.11.2.min.js"></script>
<script> 
$(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");
  });
});
</script> 
</head>
<body>
<button>begin</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

配合文字也有双重的效果，如下：

<html>
<head>
<script src="jquery/jquery-1.11.2.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
</head>

<body>
<button>begin</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

9. 动画和效果结束前也可以使其停止，可以应用于所有的动画和效果；

stop()可以用来停止动画，当动画开始的时候，页面所有动画都处于一个队列里，stop()是用来停止当前对话，队列里的对话还是会继续执行；stop(true)表示要清空动画队列，停止所有动画；stop(true,true)表示要停止所有动画，但是要完成动画；动画停止的时候，点击动画开始，动画会从停止的地方继续执行，例子：

<html>
<head>
<script src="jquery/jquery-1.11.2.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  
  $("#stop").click(function(){
    $("div").stop();
  });

  $("#stop2").click(function(){
    $("div").stop(true);
  });

  $("#stop3").click(function(){
    $("div").stop(true,true);
  });
  
});
</script> 
</head>
<body>

<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

10. 上述过程都是针对一种效果，也可以将多种效果结合，使用chaining，例如：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

使得id="p1"的元素先变红，再向上滑动，再向下滑动；这样做的好处是不用多次的去查找id="p1"的元素，可以提高效率。

dxylilac

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记1——入门

前端的东西学起来简单，但是太容易忘了，所以学习的过程中记录一下。1. jQuery是js的库，封装了一些功能，简化了js编程2. 需要通过script标签添加jQuery的库3. 操作广泛：可以对DOM元素组或者单个DOM节点进行操作；可以操作html的元素；使用xPath选择器对某一类的属性进行操作；也可以修改CSS$(this) 对当前元素的操作$("p")
复制链接

扫一扫