jquery事件

阅读更多关于 jQuery事件

jQuery是为事件处理特别设计的 ###jQuery事件函数### 事件处理程序指的是当HTML中发送某些事件时所调用的方法。实例: $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); 当按钮点击时会使所有的 <p> 元素隐藏。 ###单独文件中的函数### 如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。如这样分开: <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery_functions.js"></script> </head> ###jQuery名称冲突### jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(); ###结论### 把所有 jQuery 代码置于事件处理函数中

jquery checkbox实例

阅读更多关于 jquery checkbox实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ul, ol { list-style: none; padding: 0; margin: 0; } li { display: inline-block; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <input type="checkbox" name="simple" id="" value="" />苹果 <input type="checkbox" name="simple" id="" value="" />苹果 <input type="checkbox" name="simple" id="" value="" />苹果 <input type="checkbox" name="simple" id="" value="" />苹果 <input type="checkbox" id="all" value="全选" /> <script type="text/javascript"> $(function() { //

jquery 实现加载前动画

阅读更多关于 jquery 实现加载前动画

这里主要用$.ajax(options) 这个是jQuery 的底层 Ajax 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。注意：如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。当设置 datatype 类型为 'script' 的时候，所有的远程(不在同一个域中)POST请求都回转换为GET方式。 $.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。数据类型设置为 "jsonp" 时，jQuery 将自动调用回调函数。参数名称类型说明 url String (默认: 当前页地址) 发送请求的地址 type String (默认

EasyUI 表单插件 multiline easyui-textbox 多行换行失效问题

阅读更多关于 EasyUI 表单插件 multiline easyui-textbox 多行换行失效问题

1、问题描述：原始html： <input class="easyui-textbox" name="myname" id="myid" style="width:100%;height:60px" data-options="multiline:true"> 输入文本： 111 222 333 取值jquery： $("#myid").val() 取回的值 111222333 2、解决方案：网上解决方案，五花八门，1）、有的用隐藏的textarea传值的，2）、有用<br>替换了，后台再传回来的，3）、还有个更diao的，用监听键盘回车事件，然后用隐藏域保存，太牛了，不敢用。 3、最终我的解决方案：其实easyui自己早就解决了这个问题，只是我们用的是jquery的取值语法，所以无效，要用easyui自己的取值语法就好了。不叨叨，直接看代码： $("#myid").textbox('getValue'); 来源： https://www.cnblogs.com/ningjiabing/p/11045184.html

Jquery DataTable基本使用

阅读更多关于 Jquery DataTable基本使用

原文地址 https://www.cnblogs.com/xiashengwang/p/8087181.html 1，首先需要引用下面两个文件 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 2，DataTable支持的数据类型 https://www.datatables.net/manual/data/ 2.1 数组 vardata = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ], [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] ] 2.2 对象 [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date":

jQuery的图像裁剪插件Jcrop

阅读更多关于 jQuery的图像裁剪插件Jcrop

1.最基本使用方法 html代码部分： <img src="demo_files/flowers.gif" id="demoImage"/> js部分： $( function() { $("#demoImage").Jcrop(); } ); 这样就可以在图片上进行裁剪了。 2.得到选中区域的坐标以及回调函数 html代码部分如下： <img src="demo_files/flowers.jpg" id="demoImage" /> <label>x1</label><input type="text" id="txtX1" /> <label>y1</label><input type="text" id="txtY1" /> <label>x2</label><input type="text" id="txtX2" /> <label>y2</label><input type="text" id="txtY2" /> <label>width</label><input type="text" id="txtWidth" /> <label>height</label><input type="text" id="txtHeight" /> js代码部分如下： $( function() { //事件处理 $("#demoImage").Jcrop( {

jQuery中bind方法与live方法区别

阅读更多关于 jQuery中bind方法与live方法区别

<p>    今天做项目时遇到的关于live与bind的问题，经查阅资料所得，live实际上为bind方法的变型，bind方法<strong>仅支持当前存在元素的事件绑定，而对于日后js动态生成的元素绑定无效</strong>。而live方法则弥补了此缺陷，即可以对使用js动态生成的元素产生绑定事件。</p> <p>    出现这种情况得益于live方法的"事件委托机制"，即绑定在祖先元素上的事件可以在其后代元素中使用。live方法把事件绑定在DOM树的根节点上，而不是绑定到具体的节点中。</p> <p>    如$("myBtn").live("click",func1);把func1事件绑定到DOM树根节点上，当点击myBtn按钮时，我们会不断地向上冒泡查找是否存在关于myBtn的click事件，直到查找到DOM树的根节点上，触发了func1事件。</p> 来源： oschina 链接： https://my.oschina.net/u/1043613/blog/186283

jquery常用代码集锦

阅读更多关于 jquery常用代码集锦

1. 如何修改jquery默认编码（例如默认GB2312改成 UTF-8 ） 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentType : "application/x-www-form-urlencoded;chartset=UTF-8" } }); 2. jquery判断元素上是否绑定了事件 1 2 3 4 5 //jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件 var $events = $( "#id" ).data( "events" ); if ($events && $events[ "click" ]) { // your code } 3. 被选中的option元素 1 $( '#element' ).find( 'option:selected' ); 4. 禁用右键单击上下文菜单 1 2 3 $(document).bind( "contextmenu" , function (e){ return false ; }); 5. 禁用文本选择功能 1 2 3 $(document).bind( "selectstart" , function () { return false ; }); 6. jquery隔行换色 1 2 $( ".div_row1:even"

jQuery仿QQ音乐播放器

阅读更多关于 jQuery仿QQ音乐播放器

本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器，是前端技术的综合应用，所用素材来源于网络，仅供学习分享使用，如有不足之处，还请指正。涉及知识点在本例中用到的知识点如下，按jQuery和CSS进行区分： jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程，常见知识点如下：通过标签获取jQuery对象：var $audio =$("audio"); 通过选择符获取jQuery对象并设置文本内容：$(".music_progrss_time").text(timeStr); 通过选择符，标签名获取对象并获取第i个子元素：$(".song_lyric ul li").eq(index); 通过ajax异步获取数据并刷新页面：$.ajax({}); 通过类选择符获取元素并进行隐藏或显示：$(this).find(".list_menu").stop().fadeIn(100); 通过委托动态设置单击事件，主要针对动态生成元素：$(".content_list").delegate(".list_check", "click", function() {}); 通过addClass添加类，removeClass删除类，toggleClass切换类，hasClass是否包含类获取与对象同级的兄弟节点：$musicList

jQuery 事件与事件对象

阅读更多关于 jQuery 事件与事件对象

一.摘要事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性. 大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方, 希望大家帮忙指出, 一起学习一起进步. 在技术的世界里我们是没有任何利益瓜葛. 希望大家都抱着彼此鼓励的心态, 对于回复中的激进评论我也都会考虑, 但是希望能够彼此尊重, 保护博客园这片程序员的净土! 三.事件与事件对象曾经在我的 " Javascript公共脚本库系列(二): 添加事件多播委托的方法 " 和 " Javascript公共脚本库系列(三): 格式化事件对象/事件对象详解 " 两篇文章中, 曾讲解过javascript中的事件和事件对象. 首先看一下我们经常使用的添加事件的方式: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns

订阅 jquery事件