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. css3 使用SVG做0.5px 的边框细线

    .HalfPixelLine{ background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http: ...

  2. Python for Informatics 第11章 正则表达式一（译）

    注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 目前为止,我们一直在通读文件,查 ...

  3. BZOJ1012[JSOI2008]最大数maxnumber 题解

    题目大意: 维护一个数列,有两种操作:1. 查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2.插入操作:将n加上t,其中t是最近一次查询操作的答案(如果还未执行 ...

  4. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  5. NOI模拟赛 Day1

    [考完试不想说话系列] 他们都会做呢QAQ 我毛线也不会呢QAQ 悲伤ING 考试问题: 1.感觉不是很清醒,有点困╯﹏╰ 2.为啥总不按照计划来!!! 3.脑洞在哪里 4.把模拟赛当作真正的比赛,紧 ...

  6. ObjectContext,DataContext和DBContext 分别获取linq 的sql方法

    ObjectContext 先定义一个扩展方法: public static string ToTraceString<T>(this IQueryable<T> t) { s ...

  7. nodejs高大上的部署方式-PM2

    1.最常用的属nohup了,其实就是在后台执行进程,末尾加个&   [zhoujie@ops-dev ~]$ nohup node /home/zhoujie/ops/app.js & ...

  8. ubuntu安装Lua

    1.网站下载LUA包 curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz 2.下载ubuntu的编译支持sudo apt-get install bu ...

  9. Android studio使用增量更新进行版本升级

    今天将Android Studio更新了一下,特此记录一下升级过程,以后可能还会用得着. 首先通过菜单栏进入 Help --> Check for update 查看下当前版本是否需要更新.事实 ...

  10. getPos封装

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...