<!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. 最全面的C/C++编码规范总结

    C语言是面向过程的,而C++是面向对象的 对于不同的编程语言来说,具体的编码规范可以有很大的不同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性.可维护性.例如我们可以规定某 ...

  2. Python中利用for表达式创建列表

    1.for表达式语法格式及用法 for表达式利用可迭代对象创建新的列表,for表达式也称为列表推导式,具体语法格式如下: [表达式 for 循环计数器 in 可迭代对象] 例: a = [ i + i ...

  3. Update(Stage4)：spark_rdd算子：第1节 RDD_定义_转换算子：深入RDD

    一. 二.案例:详见代码.针对案例提出的6个问题: 假设要针对整个网站的历史数据进行处理, 量有 1T, 如何处理? 放在集群中, 利用集群多台计算机来并行处理 如何放在集群中运行? 简单来讲, 并行 ...

  4. 【PAT甲级】1001 A+B Format (20 分)

    题意:给两个整数a,b,计算a+b的值并每三位用逗号隔开输出(−1e6​​≤a,b≤1e6​​) AAAAAccepted code: #include<bits/stdc++.h> us ...

  5. Linux kali安装chromium

    打开终端,输入以下命令 apt-get install chromium chromium-l10n

  6. Android Studio 配置Gradle

    一, 问题:①换个新电脑安装完Android Sutdio第一次打开一个工程巨慢怎么办?② 手动配置Gradle Home为什么总是无效?③ 明明已经下载了Gradle,配置了gradle home, ...

  7. JavaScript - __proto__和prototype，原形

    参考 https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript 区别 构造函数中的prototype创建 ...

  8. IDEA call Hierarchy 双击跳转源码后绿色选中背景不消失问题

    1.版本,2019.2.2. 2.这个问题貌似是个bug,就是选中变色后会一直在,目前没有找到对应方法或者配置,如果你找到了,欢迎在评论中分享一下. 3.我这里只能先简单粗暴处理下,通过设置选中时不设 ...

  9. word2vec词向量处理中文语料

    word2vec介绍 word2vec官网:https://code.google.com/p/word2vec/ word2vec是google的一个开源工具,能够根据输入的词的集合计算出词与词之间 ...

  10. Linux下清空文件的3种方法

    1.echo -n > test.log #-n选项可以去掉空行 2.cat /dev/null > test.log 3.truncate -s 0 test.log