jquery

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<h1>adfasfdadfa</h1>

<p>asdfadfafdafafda</p>

<p></p>

<p></p>

<p></p>

<button id="hide" type="button">隐藏</button>

<button id="show" type="button">显示</button>

<button id="toggle" type="button">显示下拉菜单</button>

<a href="http://www.baidu.com"> 百度</a>

<a href="http://www.sohu.com"> 搜狐</a>

<select>

    <option value="v1">V1</option>

    <option value="v2">V2</option>

    <option value="v3">V3</option>

</select>

<div id="div1">中华医学会</div>

<div id="div2">心医网</div>

<div id="div3">心医堂</div>

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

<script type="text/javascript">

    $(document).ready(function () {

        $("#hide").click(function () {

            $("p").hide();

        });

        $("#show").click(function () {

            $("p").show()

        });

    });

    $("select").change(function () {

        var selet_opt = $(this).children("option:selected").val()

        console.log(selet_opt)

        console.log($(this).text())

    })

    var  urlw1 = $("[href$='.baidu.com']");

    console.log(urlw1);

    $(document).ready(function () {

        $("#toggle").click(function () {

            $("#div1").fadeToggle();

            $("#div2").fadeToggle();

            $("#div3").fadeToggle();

        });

    });

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1{

            border: red solid;

        }

        .c2{

            font-size: 50px;

        }

    </style>

</head>

<body>

<div class="c1">aaaa</div>

<div class="c1">bbbbb</div>

<div class="c1">ccccc</div>

<div class="c1">dddd</div>

<div class="c2"></div>

<input name='username' type="checkbox" value="" />aaaa

<button type="button">点我呀</button>

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

<script type="text/javascript">

    $(document).ready(function () {

        $("button").click(function () {

            $(".c1").toggleClass("c2")

        })

    })

</script>

</body>

</html>
   $(document).ready(function () {

        $("#button2,#button3").click(function () {

            var name = $(this).attr("id")

            if(name == "button2"){

                $("p").append("fengjian")

            }else {

                $("p").append("")

            }

        })

    })

    $(document).ready(function () {

        $("#button2,#button3").click(function () {

            var name = $(this).attr("id")

            if(name == "button2"){

                $("p span").text(" fengjian")

            }else {

                $("p span").text("")

            }

        })

    })

    $(document).ready(function () {

        $("select").change(function () {

            var name =$("select").children("option:selected").val()

            console.log(name)

        })

    })
搜索框 

   $(document).ready(function () {

        $("#tip").focus(function () {

            var id = $(this)

            id.addClass('black')

            if(id.val() == "请输入关键字" || id.val().trim()==""){

                id.val("")

            }

        })

    })

        $(document).ready(function () {

        $("#tip").blur(function () {

            var id = $(this)

            id.addClass('black')

            if(id.length == || id.val().trim()==""){

                id.val('请输入关键字');

                id.attr("class","gray")

            }

        })

    })

jquery例子的更多相关文章

  1. [jQuery学习系列六]6-jQuery实际操作小案例

    前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...

  2. 【简译】jQuery对象的奥秘：基础介绍

    本文翻译自此文章 你有没有遇到过类似$(".cta").click(function(){})这样的JavaScript代码并且在想“$('#x')是什么”?如果这些对你想天书一样 ...

  3. jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数

    决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...

  4. jQuery插件制作

    模板:(function($){ $.fn.plugins=function(options){ var defaults = { } var options = $.extend(defaults, ...

  5. 利用jquery实现电商网站常用特效之：五星评分

    这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...

  6. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  7. 个人jQuery的使用总结

    一.使用方法 参考内容有: http://www.w3school.com.cn/jquery/jquery_ref_events.asp http://www.cnblogs.com/zhangzi ...

  8. Web前端基础——jQuery（三）

    本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQue ...

  9. 前端基础之jQuery事件

    一.常用事件 click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) ch ...

随机推荐

  1. JS:操作样式表1：行内样式

    //访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

  2. 显式激活数据库( ACTIVATE DATABASE)

    某天值班员联系我说,我负责的一套报送系统没有按时生成报文,因为此报警提前量比较大,加上系统经常发生未按时生成报文的事件,也就是没在意,然后不急不慢的到公司,打开系统页面,发现其中一个存储过程跑了将近8 ...

  3. 热烈祝贺华清远见《ARM处理器开发详解》第2版正式出版

    2014年6月,由华清远见研发中心组织多名业 内顶尖讲师编写的<ARM处理器开发详解>一书正式出版.本书以S5PV210处理器为平台,详细介绍了嵌入式系统开发的各个主要环节,并注重实践,辅 ...

  4. php链接数据库

      1:找到 ySQL服务器 $conn = mysql_connect("localhost","","") or die("链 ...

  5. sencha做个简单的登录界面

    很多人都在群里问要一个好看的登录界面,我表示很无奈,哪有好看的,每个人的要求不一样,要好看的只有自己做. 下面是我自己整理的一个通用版的登录界面,稍做修改,很容易能变成你想要的界面, 不说废话,直接上 ...

  6. 制作本地 odoo deb包安装镜像

    [本来这不是个事,可是在阿里云部署的时候,这个网速真是让我无语,本来10分钟就能解决的事,得俩三个小时,太没效率了!] 原文转自 http://www.cnblogs.com/xwdreamer/p/ ...

  7. [转载]How To Add Swap on Ubuntu 12.04

    How To Add Swap on Ubuntu 12.04 Aug 17, 2012  Linux Basics Ubuntu   About Linux Swapping Linux RAM i ...

  8. Python之路（一）

    学了一整子python,目前看到了处理“列表”的地方,目前列表给我的感觉十分像数组,但不是java中的数组,更像是php中的数组. (1)创建列表的方法:列表名 = [列表项0,列表项1,······ ...

  9. html5语义标签

  10. toLowerCase和toLocaleLowerCase的区别

    ECMAScript中涉及字符串大小写转换的方法有4个:toLowerCase().toLocaleLowerCase().toUpperCase()和toLocaleUpperCase().其中,t ...