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. 【bzoj3439】kpm的mc密码 题解

    题目大意: 有n个字符串,编号为1~n,求每一个字符串在其他字符串中以它为后缀的字符串中编号第k小的字符串的编号. 思路: 将字符串倒过来建Trie,记录每个结尾节点的编号(可能会有重复,所以开一个v ...

  2. ACM: HDU 1028 Working out 解题报告-DP

    Working out time limit per test  2 seconds memory limit per test  256 megabytes input  standard inpu ...

  3. 【BZOJ】2563: 阿狸和桃子的游戏

    http://www.lydsy.com/JudgeOnline/problem.php?id=2563 题意:给一个n个加权点m条加权边的无向图,两个人轮流拿走一个点,最后使先手得分-后手得分尽量大 ...

  4. 【bzoj1078】[SCOI2008]斜堆

    2016-05-31 16:34:09 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1078 挖掘斜堆的性质233 http://www.cp ...

  5. FLEX监视浏览器关闭事件

    在最近开发的一个FLEX项目中对于浏览器关闭时,需要做一些清理工作,该清理工作在正常情况下保证能运行就行了,要求不是太高. 因此在网上找了一些方法,经过实际测试确实可行,记录下来备查. 该方法可以完全 ...

  6. 坐标系统与投影变换及在ArcGIS桌面产品中的应用

    坐标系统与投影变换及在ArcGIS桌面产品中的应用 1.地球椭球体(Ellipsoid) 2.大地基准面(Geodetic datum) 3.投影坐标系统(Projected Coordinate S ...

  7. 终于懂浏览器里面的cookies和session了

    在PHP开发中对比起Cookie,session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制: (Php.Asp.Jsp)---: cookie(客户端)界面没有刷新 ...

  8. android-BaseAdapter自定义控件深刻理解

    一.自定义控件的实现 自定义控件需要继承BaseAdapter抽象类,该类实现了ListAdapter, SpinnerAdapter两个接口,这两个接口继承了Adapter接口类,没错.是继承Ada ...

  9. css 实现三角形的原理

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  10. bootstarp 样式细节（tooltip布局）

    在写bootstarp中发现的几个小样式问题,记录以后可能用的到 1.有时候我们想要超过td长度后自动显示省略号,我们会使用 table { table-layout: fixed; } table ...