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. Coder-Strike 2014 - Round 1 A. Poster

    主要就是先将梯子移动到最左边或者最右边 k>n/2时移动到最右边 k<=n/2时移动到最左边 然后遍历一遍 #include <iostream> #include <v ...

  2. TCP连接探测中的Keepalive和心跳包

    TCP连接探测中的Keepalive和心跳包 tcp keepalive 心跳 保活 Linuxtcp心跳keepalive保活1. TCP保活的必要性 1) 很多防火墙等对于空闲socket自动关闭 ...

  3. 如何在weka中连接数据库（转）

    相关准备: Weka.mysql已安装 MYSQL Driver for JDBC 1.进入weka的安装目录 1)新建文件夹lib和文件夹weka,然后将mysql-connector-java-5 ...

  4. GraphicsMagick+im4java 图片处理

    最近团队内部分享GraphicsMagick+im4java 图片处理 就把如何安装,运行都统一整理一下. 详细如下: 在windows上安装ImageMagick: download 地址:http ...

  5. Func<T, TResult> Delegate

    public delegate TResult Func<in T, out TResult>( T arg ) http://msdn.microsoft.com/en-us/libra ...

  6. Local Database Sample Model

    [Table] public class AddTableNameHere : INotifyPropertyChanged, INotifyPropertyChanging { // // TODO ...

  7. css设置移动端checkbox和radio样式

    复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...

  8. [MetroUI-1]无边框模式

    Wpf中取消边框,使用 WindowStyle="None" AllowsTransparency="True"

  9. butterknife简介及Generate ButterKnife Injections 不出现的问题解决

    一.概述 butterknife是一款as的功能强大插件.有了它,你几乎可以和findViewById说byebye了. 二.使用 github地址:https://github.com/avast/ ...

  10. dede新建模型中自定义联动类别调用及修改方法

    搜索了好久,没找到一个好的方法,就凑活用这个方法吧.也许只有这个方法比较好 先在后台的“联动类别管理”里新增“类别组”,“类 别 名”填中文,“缓存组名”填英文字母. 在“分类名称”后面增加分类 然后 ...