<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="jquery.1.11.1.min.js"></script>

</head>

<body>

  //html

<select id="s1" size="2" style="width: 400px;height: 200px;">

      <option>1</option>

      <option>2</option>

      <option>3</option>

   </select>

   <select id="s2" size="2" style="width: 400px;height: 200px;"></select>

 <div class="box">div</div>
 <button class="btn">removeclick</button>

 

   <button id="add">添加</button>

   <button id="del">删去</button>

<script type="text/javascript">

  //Jquery事件有如下

  click、dblclick(双击)、mouseover、mouseout、mousemove、mousedown、

  mouseup、keydown、keyup、focus、blur、change、submit、reset、scroll、on、off、contextmenu(鼠标右键事件)

  

  //例子

     $("#add").click(function(){              //将事件绑定在按钮身上

    var opt = $("#s1 option:selected").clone(true);  // 克隆选中option

  opt.appendTo($("#s2"));            //把 opt 添加到 s2

  });

    $("#del").click(function(){          //删除按钮点击的时候,事件在点击时触发

  var opt = $("#s2 option:selected");

    opt.remove();                 // opt 被移除

    })

  //上面2个函数网页效果如下


  $(".box").click(function(){

           $(this).css("color","red");

       });

 // 绑定事件  (时间类型,事件处理函数)

  $(".box").on("mouseover",function(){

           $(this).css("background-color","green");

          });

$(".btn").click(function(){

              // off   解除绑定事件        

                  $(".box").off();// 参数为事件类型   解除该类型的事件

           });

 


  //网页入口

  $(document).ready(function(){

     //编写代码

   })

  //简写

  $(function(){

   //编写代码

    })

  $().ready(function(){

  //编写代码

     })

  //上面3种方式都是一样的功能,可以根据自己的喜好,选择其中的一种。所有标签加载完自动执行上面函数

    

   //这个也是网页入口,等页面所有标签、图片什么的加载完自动执行这个函数

   window.onload = function(){

      alert("亲,你看到我了");
    }

  

</script>

</body>

</html>

Jquery事件汇总、网页入口的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. jquery中ajax的相关事件汇总

    Jquery ajax事件分类 (一) 局部事件 local events 局部事件:在单个Ajax请求对象中绑定的事件,每个 Ajax 请求对象能够依据须要绑定自己的局部事件 .局部事件仅仅会被那个 ...

  3. Jquery输入框焦点事件及鼠表事件汇总

    对于用户的输入框input,我们常常会用ajax来实现与后台的交互.输入框的内容我们可以用.val()方法获取,对于输入框内的事件,我们常用到焦点,如:input.blur.focus.... inp ...

  4. JQuery笔记汇总

    jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...

  5. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  6. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  7. jQuery事件 (jQuery实现图片轮播)

    jQuery事件按执行时间,主要分为两种,第一种是在网页加载完执行,第二种绑定在元素中,由访问者某些行为触发. $(document).ready(function(){ //事件 }); $(&qu ...

  8. JQuery --- 第三期 (jQuery事件相关)

    个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. 第三章 jQuery事件和动画

    1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...

随机推荐

  1. js图片轮换播放器

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  2. linux 环境下安装 MySQL

    参考: Linux安装MySQL5.7 注意: 安装后 出现 navicat MySQL连接Linux下MySQL的及2003错误  需要看下 虚拟机的防火墙是否关闭!!!

  3. Codeforces #590 D 二维树状数组

    题意 给一个10^5之内的字符串(小写字母)时限2s 输入n,有n个操作  (n<10^5) 当操作是1的时候,输入位置x和改变的字母 当操作是2的时候,输入区间l和r,有多少不同的字母 思路 ...

  4. 三年以上php开发经验常见面试题

    01 一般有三年以上php开发经验去百度.腾讯面试,常会接触的面试题小总结一下: 02 0.简单做一下自我介绍,?  然后谈一下近三年来你的得意之作? 03 1.面试官看过你的简历,会问一些你做的项目 ...

  5. Mysql 8.0 新特性测试

    Mysql 8.0 新特性测试 Role MySQL8.0版本添加了role特性,role是一种逻辑概念是权限的集合,可以将一个或以上的权限赋予给role,再将role赋给user.Oracle,Po ...

  6. Python 之并发编程之manager与进程池pool

    一.manager 常用的数据类型:dict list 能够实现进程之间的数据共享 进程之间如果同时修改一个数据,会导致数据冲突,因为并发的特征,导致数据更新不同步. def work(dic, lo ...

  7. ERROR: but there is no YARN_RESOURCEMANAGER_USER defined. Aborting operation.

    将start-dfs.sh,stop-dfs.sh两个文件顶部添加以下参数 HDFS_NAMENODE_USER=root HDFS_DATANODE_USER=root HDFS_SECONDARY ...

  8. 【剑指Offer面试编程题】题目1355:扑克牌顺子--九度OJ

    题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他 ...

  9. SpringMvc 初步配置

    spring-aop.jarspring-bean.jarspring-context.jarspring-core.jarspring-web.jarspring-webmvc.jarcommons ...

  10. codeblocks与MINGW的配置

    最好直接下载带GW的Codeblocks,然后配置编译器,调试器,有几个地方要注意: 1 在setting->debugger下要搜到gdb.exe/gdb32.exe 2在debug-acti ...