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. codeforces round #234B(DIV2) C Inna and Huge Candy Matrix

    #include <iostream> #include <vector> #include <algorithm> #include <utility> ...

  2. ACM: 畅通工程-并查集-解题报告

    畅通工程 Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description 某省调查城镇交通状况 ...

  3. Android --时间控件的使用

    1. mian.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns: ...

  4. 两种不同png图片的在项目中的运用

    png图片主要分为两种 png-8和png-24. PNG8和PNG24后面的数字则是代表这种PNG格式最多可以索引和存储的颜色值.”8″代表2的8次方也就是256色,而24则代表2的24次方大概有1 ...

  5. JQuery+Ajax制作省市联动

    $(document).ready(function () { $("#Province").append("<option value=''>" ...

  6. iOS开发-定制多样式二维码

    iOS开发-定制多样式二维码   二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息.使用若干个与二进制对应的几何形体来表示文字数值信息. 最常 ...

  7. 用Maven生成Eclipse中的Web项目

    转自:http://my.oschina.net/u/939893/blog/170185 进入workspace, 输入以下命令 mvn archetype:generate -DgroupId=  ...

  8. Qt 按钮事件不响应

    在Qt中,我们设置好按钮的相应事件,连好信号槽,声明什么的也没什问题,但为什么点击按钮就是没有反应,检查了半天终于发现原来是子面板上也有一个相同名称的按钮,一般来说两个面板不为父子关系的时候,分别在不 ...

  9. [CareerCup] 18.2 Shuffle Cards 洗牌

    18.2 Write a method to shuffle a deck of cards. It must be a perfect shuffle—in other words, each of ...

  10. [CareerCup] 17.7 English Phrase Describe Integer 英文单词表示数字

    17.7 Given any integer, print an English phrase that describes the integer (e.g., "One Thousand ...