jquery事件 | 易学教程

jquery学习笔记

阅读更多关于 jquery学习笔记

偶尔翻出以前学习jquery框架做的一些笔记，大体是当时觉得有必要留心的一些东西，怕一不留心删了又错过了，就贴在这里，做个纪念。 1、冒号（:）表示过滤，空格表示所有下级，（>）表示下一级（只一级），（+）表示紧接一个元素，（~）表示同辈，中括号[]表示属性过滤，（,）逗号表示将每一个选择器匹配到的元素合并后一起返回 2、注意css和attr的区别，css是样式，attr是属性。例如：图片的src、alt都是属性，但非样式。 3、若名称是由两个单词合并的第二个单词的首字母大写。例如：nextAll/wrapInner/prevUntil/andSelf等。 4 、$("button").click();错误，button是input里面的一个属性，可以这样选择input里type属性为button的元素--$("input[type='button']").click(); 5、查找特殊字符的元素，要用// 例如$("#id//-hou") -- <p id="id-hou"></p> 6、如果属性名包含 "-"的话，必须使用引号 7、$("input[name='newsletter']").attr("checked", true);添加属性，checked--true不是（checked，checked） 8、$("input[id][name$='man']") 复合条件

DOM节点操作

阅读更多关于 DOM节点操作

DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。创建节点为了使页面更加智能化，有时我们想动态的在html结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。 html代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点操作</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html> 创建一个节点： var box = $("<div id='box'>节点</div>"); //创建节点将节点插入到<body>元素内部： $("body").append(box); //插入节点插入节点在创建节点的过程中，其实我们已经演示怎么通过.append

jQuery中 mouseover、mouseout、mouseenter、mouseleave的区别

阅读更多关于 jQuery中 mouseover、mouseout、mouseenter、mouseleave的区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，与其相对应的是mouseout 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件，与其相对应的是mouseleave 一、以下这个例子能很好的帮助我们理解mouseover和mouseenter的区别： 1 <html> 2 <head> 3 <script type="text/javascript" src="/jquery/jquery.js"></script> 4 <script type="text/javascript"> 5 x=0; 6 y=0; 7 $(document).ready(function(){ 8 $("div.over").mouseover(function(){ 9 $(".over span").text(x+=1); 10 }); 11 $("div.enter").mouseenter(function(){ 12 $(".enter span").text(y+=1); 13 }); 14 }); 15 </script> 16 </head> 17 <body> 18 <div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

jQuery中mouseleave和mouseout的区别详解

阅读更多关于 jQuery中mouseleave和mouseout的区别详解

很多人在使用jQuery实现鼠标悬停效果时，一般都会用到mouseover和mouseout这对事件。而在实现过程中，可能会出现一些不理想的状况。先看下使用mouseout的效果： <p>先看下使用mouseout的效果：</p> <div id="container" style="width: 300px;"> <div id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</div> <div id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;"> <div>第一行</div> <div>第二行</div> <div>第三行</div> </div> </div> <p><script type='text/javascript'> jQuery(document).ready(function($) { $("#title").mouseover(function() { var offset = $(this).offset(); $("#list").css({left: offset.left, top: offset

jQuery基础知识笔记（一）

阅读更多关于 jQuery基础知识笔记（一）

jQuery官网： https://jquery.com/ 在线API: https://api.jquery.com/ jQuery UI： https://jqueryui.com/ API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码高版本的jQuery不支持IE浏览器，注意匹配 1. 框架库和jQuery介绍 jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JS实现的，所以并不是代替JS。可以说jQuery本身就是一堆JS函数，jQuery就是一个JS的函数库 2. jQuery文件使用（1）为什么要学习jQuery？ DOM中一个简单的功能需要大量的代码；兼容问题很多；代码容错性很差；window.onload也只能有一个（2）jQuery好处：解决浏览器兼容性问题，体积小，链式编程，隐式迭代，插件丰富，开源，免费（例题）点击按钮出现一个蓝色小方块 < script > //Dom中写法 window . onload = function ( ) { document . getElementById ( "btn" ) . onclick = function ( ) { var divObj = document . getElementById ( "dv" ) ; divObj . style .

JQuery总结

阅读更多关于 JQuery总结

==========================转载================================= 1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0]

jQery 常用工具大全

阅读更多关于 jQery 常用工具大全

1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是 jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementByIdx_x("msg"))则为jquery对象，可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项

JQUERY框架的优点与面试题

阅读更多关于 JQUERY框架的优点与面试题

1 你觉得 jquery 有哪些好处？ jQuery 是轻量级的 javascript 框架强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 ajax 封装出色的浏览器的兼容性支持链式操作，隐式迭代支持丰富的插件 jquery 的文档也非常的丰富 2. jquery 对象和 dom 对象如何转换？ 1. jquery 转 DOM 对象: jQuery 对象是一个数组对象，可以通过[index]的丰富得到 DOM 对象还可以通过 get[index]去得到相应的 DOM 对象。 2. DOM 对象转 jQuery 对象: $(DOM 对象) 3 $(document).ready()方法和 window.onload 区别？答: 两个方法有相似的功能，但是在实行时机方面是有区别的。 1 window.onload 方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。 2 $(document).ready() 方法可以在 DOM 载入就绪时就对其进行操纵，并调用执行绑定的函数。 4. 说说你对 JSON 的理解 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于标准 JavaScript 的一个子集,是一个 Js 对象或数组结构的字符串 JSON 有三类数据 1. 单个数据

Web前端基础——jQuery（二）

阅读更多关于 Web前端基础——jQuery（二）

一、jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可以不用写在 $(function(){...}); 中 var arr=[1,3,5,7,9]; arr=$.map(arr,function(item){ return item*10; }); alert(arr); [10,30,50,70,90]; //上例是将数组中的每个元素乘10,然后返回新的数组 2) $.each(Array,fn); 对数组中的每个元素,调用fn这个函数进行处理,但是,没有返回值,比上例更常用 //例一 var nameList=["哈利波特","伏地魔","小恶魔","本田","尼桑"]; $.each(nameList,function(key,value){ //对于上面的数组来说,key就是索引,value就是元素值 alert(key+":"+value); }); //例二 var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小恶魔","dd":"本田","ee":"尼桑"}; $.each(nameList,function(key,value){ alert(key+":"+value); }); /

十分钟玩转 jQuery、实例大全

阅读更多关于十分钟玩转 jQuery、实例大全

一、简介定义　　jQuery创始人是美国 John Resig，是优秀的 Javascript 框架；　　jQuery 是一个轻量级、快速简洁的 javaScript 库。源码戳这 jQuery对象　　jQuery产生的对象时jQuery独有的，只能自己调用书写规则　　支持链式操作；　　在变量前加"$"符号（var $variable = jQuery 对象）；　　注：此规定并不是强制要求。二、寻找元素选择器基本选择器、层级选择器、属性选择器与CSS类似，这里不再细说，详细猛戳这里。基本筛选器 $('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素，从 0 开始 $("tr:odd") //索引为奇数的元素，从 0 开始 $("tr:eq(1)") //给定索引值的元素 $("tr:gt(0)") //大于给定索引值的元素 $("tr:lt(2)") //小于给定索引值的元素 $(":focus") //当前获取焦点的元素 $(":animated") //正在执行动画效果的元素内容选择器 $("div:contains('nick')") //包含nick文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(p)") /

订阅 jquery事件