jquery学习基础

这篇博客将会给大家带来jquery中的一些基础操作。

使用click绑定事件

使用click为div绑定点击事件

<div>
   testclick
</div>

$(function($) {
    $("div").click(
      function() {
        alert("hello world");
    }
  );
});

点击增加样式

点击div时候,改变其字体颜色和背景色

<div>
    click to change the backgroundcolor
</div>

$(function($) {
    $("div").click(
        function(){
            $(this).css({ color: "#ff0011", background: "blue" });
        }
    );
});

隐藏和显示

使用show()和hide()

先看下效果:

代码如下:

body{
    margin:0 auto;
    width:500px;
    height:100%;
}
a{
    text-decoration:none;
    hover:#ff0000;
}

a:hover{
    color:#ff0000;
}

div{
    height:200px;
    width:200px;
    background:rgb(200,100,150);
    display:none;
}

<a href="#" id="show">显示</a>
<a href="#" id="hidden">隐藏</a>
<div>

</div>

可以看到首先将div隐藏了。

jquery代码如下:

$(function($) {
        $("#show").click(
            function() {
                $("div").show("slow");
            }
        );
        $("#hidden").click(
            function() {
                $("div").hide("fast",
                    function() {
                        alert("隐藏完成");
                    }
                );
            }
        );
    });

这里当点击隐藏的时候,在隐藏完成的时候会触发一个匿名函数,会弹出一个alert。

使用toggle()

效果:

代码和上面是一样的,看下js代码:

$(function($) {
        $("#toggle").click(
            function() {
                $("div").toggle("slow");
            }
        );
 });

这里为id=”toggle”的元素绑定了一个click方法,使用了jquery提供的toggle方法,隐藏和显示div元素。

滑动显示隐藏

先看效果:

jquery代码如下:

$(function($) {
        $(".down").click(
            function() {
                $("div").slideDown("slow","linear",function(){
                    alert("slide down ok");
                });
            }
        );
        $(".up").click(
            function() {
                $("div").slideUp();
            }
        );
    });

这里,slideDown和slideUp可以接受 三个参数:

1.speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)

2.easing:(Optional) 用来指定切换效果,默认是”swing”,可用参数”linear”

3.fn在动画完成时执行的函数,每个元素执行一次。

fadeIn和fadeOut淡入淡出

先看效果:

jquery代码如下:

$(function($) {
        $(".in").click(
            function() {
                $("div").fadeIn(3000,"linear",function(){
                    alert("slide down ok");
                });
            }
        );
        $(".out").click(
            function() {
                $("div").fadeOut();
            }
        );
    });

这里,在淡入的时候我指定了需要三秒时间,淡入完成以后触发匿名函数。

使用delay()延迟执行

可以使用delay函数,延迟执行动画,先看效果:

$(".delay").click(
    function() {
        $("div").fadeIn(4000).delay(800).slideUp("slow");
    }
);

这里我首使用4秒时间,将div淡入,然后在800毫秒以后又将该div隐藏。

hover的用法

hover表示当鼠标移动到元素上的情况。先看效果:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>jquery lazyLoad</title>
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
    $(function($) {
        $("ul li").hover(
            function () {
                $(this).addClass("hover");
            },
            function () {
                $(this).removeClass("hover");
            }
        );
    });
</script>
<style type="text/css">
body{
    margin:0 auto;
    width:500px;
    height:100%;
}

ul{
    list-style-type:none;
}
li{
    float:left;
    width:60px;
    background:#fff000;
    text-align:center;
    margin:3px;
}

.hover{
    border:2px solid blue;
}

</style>
</head>
<body>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</body>
</html>

可以看到当鼠标滑过的时候,为当前的li元素添加了一个class。这里就是为其添加了一个样式。

toggleClass学习

toggleClass:如果存在(不存在)就删除(添加)一个类。 看效果:

table{
    border:none;
    width:70%;
    border-collapse:collapse;
}
td{
    border: solid #000 1px;
}
.clicked{
    background:#58a936;
}

这里我提前定义好了一个class=”clicked”的样式。

$(function($) {
    $("table tr").click(
        function() {
            $(this).toggleClass("clicked");
        }
    );
 });

为table下的所有tr元素绑定click事件,并且在该事件中添加或删除该元素的class。

mouseover和mouseout

mouseover和mouseout分别定义鼠标移动到元素上和鼠标移出时的事件。看效果:

关键代码:

$(function($) {
        $("table tr").mouseover(
            function(){
                $(this).css({background:"#ff0892"});
            }
        );
        $("table tr").mouseout(
            function(){
                $(this).css({background:"#ffffff"});
            }
        );
  });

这里我动态的为选中的元素设置背景色,也可以提前定义好一个样式然后通过addClass和removeClass来实现。

each和find的用法

each:以每一个匹配的元素作为上下文来执行一个函数

find:搜索所有与指定表达式匹配的元素

$(function($) {
    $("ul").find("li").each(function(i){
        $(this).html($(this).html()+"---"+i);
    });
  });

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
    <li>eee</li>
</ul>

效果如下:

源码下载

css上下左右垂直居中

最后给大家带来一个上下左右垂直居中的demo:

效果如下:

css代码如下:

body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
div{
    position:absolute;
    top:50%;
    left:50%;
    width:600px;
    height:150px;
    margin-top:-75px;/*注意这里必须是DIV高度的一半*/
    margin-left:-300px;/*这里是DIV宽度的一半*/
    background:#f78644;
    border:2px solid rgb(123,200,89);
}

这样的居中方式,非常适合做登陆界面。大家需要的可以收藏了哈。

ok,今天关于jquery的学习就到这里了。该休息了。

时间: 2024-11-05 12:26:03

jquery学习基础的相关文章

jquery学习基础(二)

今天继续学习jquery的基础.直接看栗子吧. jquery操作checkbox demoOne 这里我点击超链接的时候,使用alert将所有已经checked的checkbox的value值打印出来,先看下效果: 关键的html和jquery代码: <div> <a href="#">获得被选中的元素</a> <input type="checkbox" checked value="111">c

JQuery学习笔记2015-8-15(第94天)

JQuery 学习基础: 什么是JQ? •一个优秀的JS库,大型开发必备 JQ的好处? •简化JS的复杂操作 •不再需要关心兼容性 •提供大量实用方法 如何学习JQ? •www.jquery.com •JQ只是辅助工具,要正确面对 •需要分阶段学习 JQ设计思想? •选择网页元素 –模拟CSS选择元素 –独有表达式选择 –多种筛选方法 •JQ写法 –方法函数化 –链式操作 –取值赋值合体 •JQ与JS关系 –可以共存,不能混用 实例: <!DOCTYPE HTML> <html>

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

JQuery学习笔记——JQuery基础

#,JQuery避免名称冲突的方法 var jq = jQuery.noConfilct(); jq.ready( function(){ jq("p").hidden(); }); 就是为了避免和其他库中$冲突: #,在引用jquery的时候,可以考虑使用google或者微软的cdn的jquery链接: <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js&quo

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习之:Validation表单验证插件

http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每个人都能够有所掌握,慢慢会用.于是,自己便开始学习…… 由于Struts2自己早就学过,因而不需要花多少时间.而AJAX之前没怎么用过.现在AJAX框架如此之多,选择哪一个呢?开始打算选择 dojo,但是看了一点后,发现蛮复杂的.在之前有学过一点点jQuery,而网上也说jQuery很强大而且很容易

很不错的jQuery学习资料和实例

这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关教程,  如果你对jQuery感兴趣, 也可以查看帕兰写的文章: 37个更加出色的jQuery插件 45个新鲜出炉的jQuery插件 50多个强大的jQuery插件应用实例 John Resig John Resig, 这位是 JQuery JavaScript脚本库的创建者, 同时也是Mozill

jQuery学习简要笔记

前言:熟悉jQuery的代码是了解jQuery整个应用的核心与基础,jQuery是一款优秀的js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!下面来重温一下整个jQuery的知识,大家如果有javascript 开发基础,对于学习jQuery是非常有帮助的. 1. 熟悉JQuery的基础用例,如果对Javascript的示例代码比较熟悉的话,可以采用如下的函数代码:// 页面加载完毕后的响应事件代码列表如下:$(document).ready(function(){  $

jquery学习之AJAX

1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与server交换数据并更新部分网页的艺术,在不又一次载入整个页面的情况下. 2,什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步