<!DOCTYPE html>

<html>

<head>

    <title>jquery</title>

    <meta charset="utf-8">

    <!-- 引入jquery库和bootstrap的css库 -->

    <script src="static/jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">

<div class="container">

    <div id="alertbox" class="alert alert-success" role="alert">这是警告框</div>

</div>

</head>

<body>

<!-- ①按钮和表单元素 -->

<button id="btn1" class="btn btn-info">按钮</button>

<form id="form1" action="http://www.baidu.com/s">

    <input type="text" id="search1" name="wd">

    <input type="submit" name="提交">

</form>

<!-- ②通过按钮提交内容到某段内容id=content中并累加 -->

<div class="alert alert-success" id="content"></div>

<input type="text" id="input-text" name="">

<button class="btn btn-default" id='submit-btn'>发送</button>

<script type="text/javascript">

    /*

    注意：js代码必须在获取的元素以后加载，否则无法正常获取元素

    jquery的语法

    $(选择元素).操作方法().操作方法2()

    选择元素和我们的css语法一致

    操作方法：

        .show 显示

        .hide 隐藏  可以传入一个毫秒值 产生动画

        .html() 修改元素标签内的内容

            .html() 获取标签内部的值

            .html(xxx) 把标签内部的值 设置为xxx

        .on 绑定事件(时间类型，触发函数)

        .val 获取或者设置输入框的值

            .val() 获取输入框的值

            .val(xxx) 把输入框的值 设置为xxx

    */

    // ①jquery实现隐藏3秒，和展示动画效果1秒展示

    /*$('#alertbox').hide(3000).show(1000);

    // 赋值html

    $('#alertbox').html('heihei');

    // 赋值输入框

    $('#alertbox').html('username: <input type="text" value="username" />');*/

    //触发点击事件

    /*$('#btn1').on('click',function(){

        $('#alertbox').html('username: <input type="text" value="username" />').hide(2000);

        // alert('jack')

    })*/

    //通过val赋值

    /*$('#btn1').on('click',function(){

        $('#search1').val('51reboot');

    })

    $('#form1').on('submit',function(){

        if ($('#search1').val() == "51reboot"){

            alert('go');

            //return false是终止submit事件

            return false;

        }

    })*/

    //②通过按钮提交内容到某段内容中并累加

    $('#submit-btn').on('click', function(){

        var oriText = $('#input-text').val()

        var oriContent = $('#content').html()

        $('#content').html(oriContent + '<br/>' + oriText)

        //清除输入框的内容

        $('#input-text').val('')

    })

</script>

</body>

</html>

jquery简单使用入门的更多相关文章

  1. Python简单爬虫入门三

    我们继续研究BeautifulSoup分类打印输出 Python简单爬虫入门一 Python简单爬虫入门二 前两部主要讲述我们如何用BeautifulSoup怎去抓取网页信息以及获取相应的图片标题等信 ...

  2. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  3. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  4. Python简单爬虫入门二

    接着上一次爬虫我们继续研究BeautifulSoup Python简单爬虫入门一 上一次我们爬虫我们已经成功的爬下了网页的源代码,那么这一次我们将继续来写怎么抓去具体想要的元素 首先回顾以下我们Bea ...

  5. GJM : Python简单爬虫入门（二） [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  6. jquery插件开发基础入门

    jquery插件开发基础入门 入门 编写一个jquery插件开始于给jquery.fn加入新的功能属性,此处添加的对象属性的名称就是你的插件名称 jQuery.fn,myPlugin = functi ...

  7. DirectShow 最简单的入门 -- 播放一段视频

    #include <dshow.h> #pragma comment(lib,"strmbase.lib") #pragma comment(lib,"qua ...

  8. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

  9. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

随机推荐

  1. HDU 5984 数学期望

    对长为L的棒子随机取一点分割两部分,抛弃左边一部分,重复过程,直到长度小于d,问操作次数的期望. 区域赛的题,比较基础的概率论,我记得教材上有道很像的题,对1/len积分,$ln(L)-ln(d)+1 ...

  2. Python复习笔记（十）Http协议--Web服务器-并发服务器

    1. HTTP协议(超文本传输协议) 浏览器===>服务器发送的请求格式如下:(浏览器告诉服务器,浏览器的信息) GET / HTTP/1.1 Host: www.baidu.com Conne ...

  3. 细说log4j之概述

    log4j官网:https://logging.apache.org/ log4j目前存在2个版本:log4j 1.x 和log4j 2.x,目前官方主推2.x版本(log4j 1.x已于2015.0 ...

  4. Hadoop 博文整理

    参考文章##搭建 使用yum安装CDH Hadoop集群   http://blog.javachen.com/2013/04/06/install-cloudera-cdh-by-yum/   Ha ...

  5. Java8新特性 并行流与串行流 Fork Join

    并行流就是把一个内容分成多个数据块,并用不同的线程分 别处理每个数据块的流. Java 8 中将并行进行了优化,我们可以很容易的对数据进行并 行操作. Stream API 可以声明性地通过 para ...

  6. 设置 img 在 div 中水平居中和垂直居中

    Ø  前言 写 html + css 时,img 标签的垂直与水平居中,应该是很常见的设计.实现的方式很多,但是容易遗忘,下面分别整理了几种实现方式. 1.   css 代码 <style ty ...

  7. Android开发最强模拟器Genymotion的安装及使用教程。附注释图详解

    前沿   呵呵,笔者第一次在公开的博客网站写心得,想让自己的Android开发生涯留下点足迹,并且为自己做点笔记,如果该文章能帮到广大的Android小白朋友最好了(其实我也是一小白,(●'◡'●)) ...

  8. 【bzoj 4764】弹飞大爷

    Description 自从WC退役以来,大爷是越来越懒惰了.为了帮助他活动筋骨,也是受到了弹飞绵羊一题的启发,机房的小伙伴们决定齐心合力构造一个下面这样的序列.这个序列共有N项,每项都代表了一个小伙 ...

  9. C# CancellationTokenSource 终止线程 CancellationTokenSource实现对超时任务的取消

    C# 使用 CancellationTokenSource 终止线程 使用CancellationTokenSource对象需要与Task对象进行配合使用,Task会对当前运行的状态进行控制(这个不用 ...

  10. ThinkPHP5基础学习（慕课版）

    一.thinkphp 5.0 的安装及配置 二.URL和路由 三.请求和相应 四.视图和模板 五.数据库的操作 六.模型的操作