jquery选择器 | 易学教程

jQuery基本知识

阅读更多关于 jQuery基本知识

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　jQuery知识结构 * jQuery入门? * js函数库(DOM/ajax) * 特点: * HTML元素选取 * HTML元素操作 * CSS操作 * HTML事件处理 * JS动画效果 * 链式调用 * 浏览器兼容 * Ajax封装 * 易扩展插件 * helloworld * 引入库 * 引入库文件到项目中 * 在页面中引入 * 使用库 * 使用jQuery核心函数 : $/jQuery * 使用jQuery核心对象 : 使用调用$()返回的结果 $(function(){ $('#demo').click(function(){ //处理点击响应逻辑 }); }); * 回调函数: * 你定义的 * 你没有调用 * 但它最终执行了(一定时机/条件) * jQuery的2把利器 * jQuery核心函数 : * $/jQuery : jQuery库定义的两个全局函数 * 作为一般函数调用 : $(params) * callback function : 绑定文档加载完成的回调 * 选择器字符串 : 查找所有匹配的dom元素, 并包装为jQuery对象返回 * 标签字符串 : 生成dom元素对象, 并包装为jQuery对象返回 * dom元素对象: 将指定的dom元素包装为jQuery对象返回

jquery对dom节点的操作

阅读更多关于 jquery对dom节点的操作

3 月，跳不动了？>>> 1、 JavaScript脚本放在哪里才好？　 1.当有些函数需调用才执行或者有些事件需触发才执行的脚本，我们可以将脚本放在 HTML的head 部分中,这样可以保证脚本在任何调用之前已经被加载。　2.当页面加载时需执行的脚本可以放在HTML的body部分，这类脚本通常被用来生成页面的内容。　3.当页面加载后需立即执行的脚本，我们可以放在最后，文档加载之后执行。所幸的是，Jquery有事件控制，所以，这部分我们可以下载 head 引用的外部文件中。 2、jquery的常用函数（ http://www.cnblogs.com/Jolinson/p/3441209.html ）如： children() 、 parent()、 each()、 text()、 html()、 val()、 next()； <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li

jQuery的学习笔记

阅读更多关于 jQuery的学习笔记

JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中，$是jQuery的别名，如：$()相当于jQuery（）注意：在使用JQuery进行开发的时候如果在做所有事情之前，希望jQuery操作DOM文档，就必须保证在DOM载入完毕后开始执行，应该使用ready事件作为处理HTML文档的开始。 1.4JQuery的核心功能 1.对外接口单一让使用更简单 2.链式语法让编码更加的快速和优雅 3.模仿CSS选择器让选取元素更加的精确的灵活 4.拓展接口让JQuery更开放，富有活力 1.5容易混淆的几个概念ＤＯＭ对象是文档对象模型ＪＱｕｅｒｙ对象实际上是普通的ＪａｖａＳｃｒｉｐｔ对象，他其中包含了ＤＯＭ对象的集合。ＪＱｕｅｒｙ对象不能调用ＤＯＭ对象的方法，ＤＯＭ也不能调用ＪＱｕｅｒｙ对象的方法和属性，如果非要使用的话，可以把JQuery对象转换为DOM对象，方法有两种：一种是借助数组下标来读取JQuery对象集合中的某个ＤＯＭ对象；例如： <!DOCTYPE html>  <html> <head lang="en"> <meta charset="UTF-8"> <script src="../jquery/jquery-1.11.3.js"

事件、监听、jQuery、轮播手动

阅读更多关于事件、监听、jQuery、轮播手动

a链接事件阻止默认行为 return false HTML元素大都包含了自己的默认行为，例如：超链接、提交按钮等。我们可以通过在绑定事件中加上return false来阻止它的默认行为。通用性的事件监听方法 1.绑定HTML元素属性 <input type="button" value="clickMe" onClick="check(this)"> 2 绑定dom对象属性 document.getElementById("btn1").onClick=test; //test函数名两种添加事件方式 1. function show(){ alert("你点击了我"); 2.document.getElementById("mytest1").onclick=show; //+()是调用,不+是参数 function show(){ aler t("你点击了我"); } //页面加载完成后调用 window.onload=function(){ /*第二种添加事件方式*/ document.getElementById("mytest1").onclick=show; } 标准DOM事件监听方法 [object].addEventListener(“事件类型”,”处理函数”,”冒泡事件或捕获事件”); var bt1=document.getElementById(

初识jQuery

阅读更多关于初识jQuery

jQuery是JS对象和实用函数的封装。 jQuery与JS相比的优势是语法更简单、也不存在兼容性问题。 jQuery是JS的程序库。 jQuery的用途：访问和操作DOM元素控制页面样式对页面事件的处理方便地使用jQuery插件与Ajax技术的完美结合 jQuery的优势：轻量级，只有100kb 强大的选择器，几乎支持所有CSS选择器出色的DOM封装。可靠的事件处理机制出色的浏览器兼容性隐式迭代丰富的插件支持 jQuery主要包含三部分：工厂函数 $ $(selector).action(); $符号等价于jQuery。 DOM对象必须用双引号包裹起来，document对象则写作$(document)。选择器 selector $(ID选择器、类选择器、标签选择器); 方法 action() jQuery用于操作CSS的操作之一： jQuery对象.addClass([样式名]); 样式名可以是多个，用空格隔开。 css(“属性”,”属性值”); //设置一个css css({“属性1”:”属性值1”,”属性2”:”属性值2”})；//设置多个css $(selector).show(); //显示样式 $(selector).hide(); //隐藏样式 css()与addClass()方法的区别： css(

jQuery

阅读更多关于 jQuery

jquery使用 jQuery的官网地址： https://jquery.com/ ，官网即可下载最新版本。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div></div> <script> $(function () { $('div').hide() }) </script> </body> </html> jq基本使用 JQ对象和DOM对象相互转换 DOM对象转换为JQ对象 var jQueryObject = $(DOM) JQ对象转换为DOM对象 jQuery对象[索引值] jQuery对象.get(索引值) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"></script> </head> <body> <video

jquery 杂记

阅读更多关于 jquery 杂记

设置或返回元素的属性值： $("#imgId").attr('src'); // 获取元素的属性值　　$("#imgId").attr('src',path); // 设置元素的属性值　　$("#imgId").getAttribute(“src”) ; // getAttribute() 方法返回指定属性名的属性值。　　　　用JQuery操作元素的style属性: 　 $("p").css("color"); //获取p元素的样式颜色　　$("p").css("color","red"); //设置p元素的样式颜色为红色　　$( "#id").show(); //表示display:block, 　　$( "#id").hide(); //表示display:none; 　　$( "#id").toggle(); //切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 $( "#id").css( 'display', 'none'); $( "#id").css( 'display', 'block'); 　　判断是否隐藏显示：　　　　.is(':visible') // 是否显示　　　　is(":hidden") // 是否隐藏获取元素的值、设置元素的值：　　获取value值： $("#id").val() 　

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']") 复合条件

看几道JQuery试题后总结（下篇）

阅读更多关于看几道JQuery试题后总结（下篇）

感谢圆友的提醒昨天下午完成了9道试题中的前4道，之后好多园友存在些疑惑和建议，在这里我一并说一下吧。首先对于昨天第一题可能存在误导，在JQuery中并没有innerHTML这个属性，不过我们可以将JQuery对象转换成DOM对象再使用innerHTML，还有对于那个innerTEXT也是操作DOM对象的，不过貌似用的比较少。其次是第三题，我们选择表单元素，尽量使用表单元素选择器。总之，感谢圆友们的批评指正、、、接下来我们继续完成昨天没有完成的试题...... 第五题题目：JQuery对象与dom对象的区别，以及两者互相转换的方法 var jquery = $("#x1"); //jquery对象 var dom = document.getElementById("#x1"); //dom对象　　两者区分：　　jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的，使用JQuery对象可以使用JQuery对象中的方法。例如在JQuery中我们可以使用"对　　　　象.html()"来获取元素内的内容，它等同于在DOM中使用"对象.innerHTML"。还有我们使用这两种对象的时候必须分清情况，不能再JQuery对象中使用DOM对象的方法，也不能在BOM对象中使用JQuery对象的方法，小弟我昨天就犯错了。　　两者互相转换： /

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选择器