jquery笔记

jQuery 的选择器

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id 值是myElement所以得到的是唯一的元素

$("div") 选择所有的div标签元素，返回div元素数组

$(".myClass") 选择使用myClass类的css的所有元素

$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

层叠选择器：

$("form input") 选择所有的form元素中的input元素

$("#main > *") 选择id值为main的所有的子元素

$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器：

$("tr:first") 选择所有tr元素的第一个

$("tr:last") 选择所有tr元素的最后一个

$("input:not(:checked) + span")

过滤掉：checked的选择器的所有的input元素

$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）

$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素

$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素

$("td:gt(4)") 选择td元素中序号大于4的所有td元素

$("td:ll(4)") 选择td元素中序号小于4的所有的td元素

$(":header")

$("div:animated")

内容过滤选择器：

$("div:contains('John')") 选择所有div中含有John文本的元素

$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组

$("div:has(p)") 选择所有含有p标签的div元素

$("td:parent") 选择所有的以td为父节点的元素数组

可视化过滤选择器：

$("div:hidden") 选择所有的被hidden的div元素

$("div:visible") 选择所有的可视化的div元素

属性过滤选择器：

$("div[id]") 选择所有含有id属性的div元素

$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素

$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素

$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input元素

$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")

$("div span:first-child") 返回所有的div元素的第一个子节点的数组

$("div span:last-child") 返回所有的div元素的最后一个节点的数组

$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(":input") 选择所有的表单输入元素，包括input, textarea, select 和button

$(":text") 选择所有的text input元素

$(":password") 选择所有的password input元素

$(":radio") 选择所有的radio input元素

$(":checkbox") 选择所有的checkbox input元素

$(":submit") 选择所有的submit input元素

$(":image") 选择所有的image input元素

$(":reset") 选择所有的reset input元素

$(":button") 选择所有的button input元素

$(":file") 选择所有的file input元素

$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

$(":enabled") 选择所有的可操作的表单元素

$(":disabled") 选择所有的不可操作的表单元素

$(":checked") 选择所有的被checked的表单元素

$("select option:selected") 选择所有的select 的子元素中被selected的元素

选取一个name 为”S_03_22″的input text框的上一个td的text值$(”input*@ name =S_03_22+“).parent().prev().text()

名字以”S_”开始，并且不是以”_R”结尾的

$(”input*@ name ^='S_'+“).not(”*@ name $='_R'+“)

一个名为radio_01的radio所选的值

$(”input*@ name =radio_01+*@checked+“).val();

$("A B") 查找A元素下面的所有子节点，包括非直接子节点$("A>B") 查找A元素下面的直接子节点

$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点

例子：找到表单中所有的input 元素

HTML 代码:

jQuery 代码:

$("form input")

结果:

[ , ]

2. $("A>B") 查找A元素下面的直接子节点

例子：匹配表单中所有的子级input元素。

HTML 代码:

jQuery 代码:

$("form > input")

结果:

[ ]

3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点例子：匹配所有跟在label 后面的input 元素

HTML 代码:

jQuery 代码:

$("label + input")

结果:

[ , ]

4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点例子：找到所有与表单同辈的input 元素

HTML 代码:

jQuery 代码:

$("form ~ input")

结果:

[ ]

ajax 返回数据格式

jquery里面这么取出来

jQuery ajax - serialize() 方法

json_encode —对变量进行JSON 编码

$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

echo json_encode($arr);

?>

以上例程会输出：{"a":1,"b":2,"c":3,"d":4,"e":5}

jquery ajax 同步异步

之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题。最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。

而异步则这个AJAX代码运行中的时候其他代码一样可以运行。

jquery的async:false,这个属性

默认是true：异步，false：同步。

$.ajax({

type: "post",

url: "path",

cache:false,

async:false,

dataType: ($.browser.msie) ? "text" : "xml",

success: function(xmlobj){

}

});

有了这个属性可以相对的减少代码运行书序问题，但是如果用的太多，页面假死次数太多。这样反而导致用户体验不佳~！

$.Ajax()中async 和success的官方的解释：

async

Boolean

Default: true

By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

success

Function

A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.

在这里，async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程和ajax块后面的脚本（另一个线程）例：

$.ajax({

type:"POST",

url:"Venue.aspx?act=init",

dataType:"html",

success:function(result){ //function1()

f1();

f2();

}

failure:function (result) {

alert('Failed');

},

}

function2();

在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2(),也就是说，在这个时候出现两个线程，我们这里暂且说为function1() 和function2()。

当把asyn设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，知道function1()部分执行完毕。

jquery 复选框操作

1、获取单个checkbox选中项(三种写法)

$("input:checkbox:checked").val()

或者

$("input:[type='checkbox']:checked").val();

或者

$("input:[name='ck']:checked").val();

2、获取多个checkbox选中项

$('input:checkbox').each(function() {

if ($(this).attr('checked') ==true) {

alert($(this).val());

}

});

3、设置第一个checkbox 为选中值

$('input:checkbox:first').attr("checked",'checked');

或者

$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值

$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2.... 或者

$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox $('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值

$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox

$("input:checkbox[value='1']").remove();

9、删除第几个checkbox

$("input:checkbox").eq(索引值).remove();索引值=0,1,2....

如删除第3个checkbox:

$("input:checkbox").eq(2).remove();

10、遍历checkbox

$('input:checkbox').each(function (index, domEle) {

//写入代码

});

11、全部选中

$('input:checkbox').each(function() {

$(this).attr('checked', true);

});

12、全部取消选择

$('input:checkbox').each(function () {

$(this).attr('checked',false);

});

js 小数取整的函数

js 小数取整的函1.丢弃小数部分,保留整数部分

js:parseInt(7/2)

2.向上取整,有小数就整数部分加1

js: Math.ceil(7/2)

3,四舍五入.

js: Math.round(7/2)

4,向下取整

js: Math.floor(7/2)数

和css有关的方法有这些：

1、.addClass("class1") .removeClass("class2")

2、.attr("className","class1")

3、.toggleClass("class1")如果原来没有class1就添加class1，如果原来有class1就移除class1

jQuery基础教程第四版 第3章学习笔记

本文由我司收集整编，推荐下载，如有疑问，请与我司联系 jQuery 基础教程第四版第3 章学习笔记 2017/08/30 114 第3 章 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择①当文档完全下载到浏览器中时，会触发window.onload 事件，意味着页面上的全部元素对于JavaScript 而言都是可以操作的。②通过(document).ready()注册的事件处理程序，则会在DOM 完全就绪并可以使用时调用。意味着所有元素对 脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。 3.1.2 基于一个页面执行多个脚本①.onload 属性一次只能保存对一个函数的引用，因此不能在现有的基础上再增加新行为。②每次调用(document).ready()方法时都会向内部的行为队列添加一个新函数，当页面加载完成后，所有的函数都会被执行。而且，这些函数会按照注册他们的顺序依次执行。 3.1.3 .ready()的简写形式①(document).ready()结构，实际上是基于document 这个DOM 元素构建而成的jQuery 对象上调用了.ready()方法。②(document).ready(){ //这里是代码……}); 可以简写成：$(function() { //这里是代码……} 3.1.4 向.ready()回调函数中传入参数 3.2 处理简单的事件 3.2.1 简单的样式转换器①在用户单击按钮时执行，需要引入.on()方法。通过这个方法，可以指定任何DOM 事件，并为该事件添加一 种行为。此时，事件是click。eg: (‘#switcher- large’).on(‘click’,function(){});3.2.2 启用其他按钮3.2.3 利用事件处理程序的上下 文①当触发任何事件处理程序时，关键字this 引用的都是携带相应行为的DOM 元素。通过在事件处理程序中使用(this)，可以为相应的元素创建jQuery 对象，然后就如同使用CSS 选择符找到该元素一样对它进行操作。 3.2.4 使用事件上下文进一步减少代码上下文关键字this 引用的是DOM 元素，而不是jQuery 对象，因此可以使用原生的DOM 属性来确定被单击元素的ID。 3.2.5 简写的事件 3.2.6 显示和隐藏高级特性jQuery 的toggleClass()方法，能够根据相应的类是否存在而添加或删除类。 3.3 事件传播 3.3.1 事件的旅程①事件捕获：事件首先会交给最外层的元素，接着再交给更具体的元素。

jQuery学习笔记

第一章 一、$(document).ready(function(){ //do something }); 和window.onload的区别 1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示 2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成 后执行 3.前者可以简化为$(function(){ //do something }); 后者没有简写形式。 二、jQuery比较常使用的是链式操作，比如一个书目导航条： $(function(){ $(“ul”).click(function(){ $(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass (“current”).children(“li”).slideUp(); }) }) 对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。 三、jQuery对象和DOM对象的转换 1.jQuery转化为DOM对象 Var $variable = $(“tr”); //jQuery object Var variable = $variable[0]; //DOM object The transpartent method. DomObject = jQueryObject[index] or = jQueryObject.get(index). 2.DOM Object To jQuery Object Var variable = getElementsByTagName(“tr”); //DOM object Var $variable = $(variable) // jQuery object; The transpartent method. jQueryObject = $(DomObject) 四、jQuery开发工具 1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp 2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE; 3.Visual Studio 2008。想要安装插件之后才能提示jQuery

HTML5CSS3实战笔记

HTML5+CSS3响应式布局笔记 第一章：HTML5,CSS3响应式布局入门 响应式布局：流式设计，弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。 视口：指浏览器窗口内的内容区域，不包含工具栏，标签栏等。 CSS3是在CSS2基础上按模块构建的，以CSS2.1标准为核心。 实现响应式设计的关键技术是CSS3—媒体查询。 响应式布局的条件：CSS3的媒体查询，流动布局。 原则：让设计在多平台多视口的情况下保留尽可能多的内容，而不是使用display：none隐藏它。 可以通过调整标签的先后顺序来显示大小屏内容顺序问题。 第二章：媒体查询，支持不同的视口 html4中的媒体查询： 加载CSS的四种方法：行内，内链，外链，import。其中import会增加css请求，影响速度。@import url(“phone.css”) screen and (max-width: 媒体查询可以检测到如下特性，但最常用的是视口宽度（width）和屏幕宽度（device-width）: width:视口宽度。 height:视口高度。 device-width:屏幕宽度。 device-height:屏幕高度。 orientation:检查设备处于横向还是纵向。 aspect-ratio:基于视口宽度和高度的宽高比。如16：9写为aspect-ratio:16/9. device-aspect-ratio:设备屏幕的高宽比。 color:每种颜色的位数。例如min-color:16会检测设备是否拥有16位颜色。 color-index:设备的颜色索引表中的颜色数。值为非负整数。 monochrome:检测单色帧缓冲区中每像素所使用的位数。值为非负整数，比如 monochrome:2。 resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi或 min-resolution:300dpcm。 scan:电视机的扫描方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)。 grid:用来检测输出设备是网格设备还是位图设备。 以上除了scan和grid都可以使用min，max创建一个查询范围。 Respond.js(https://https://www.wendangku.net/doc/5615146446.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import

黑马程序员WEB04-JQuery篇笔记

第4章WEB04- JQuery篇 1.1使用JQuery完成定时弹出广告：1.1.1需求： 之前使用的JS的方式完成定时弹出广告，现在使用JQuery完成同样的效果: 1.1.2分析 1.1. 2.1技术分析： 【JQuery的概述】 什么是JQuery: JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装. 现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发. JS的常用的框架:

JQuery,ExtJS,DWR,Prototype... JQ的使用: 学习JQuery的语法. 【JQuery的入门】 引入Jquery的js文件. JQuery的入口函数: // 传统的JS的方式：页面加载的事件只能执行一次. /*window.onload = function(){ alert("aaa"); } window.onload = function(){ alert("bbb"); }*/ // JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高. // window.onload 等页面加载完成后执行该方法. // $(function(){}):等页面的DOM树绘制完成后进行执行. // $相当于JQuery $(function(){ alert("aaa"); }); $(function(){ alert("bbb"); }); 【JS对象和JQ对象的转换】 window.onload = function(){ // 传统JS方式： var d1 = document.getElementById("d1"); // JS对象的属性和方法: // d1.innerHTML = "JS对象的属性"; // d1.html("aaaaaa"); // 将JS对象转成JQ的对象. $(d1).html("JS对象转成JQ对象"); } $(function(){ var $d1 = $("#d1"); // $d1.html("JQ对象的属性"); // 转成JS的对象:

easyUI学习笔记

esayUI 前端开发：企业中java工程师，大多不擅于HTML+CSS 网页布局设计，门户网站（由前端工程师设计），企业内部应用软件（java工程师，选择前端UI框架ExtJS 、Flex 、Easy UI ） ---------------------- Easy UI 学习成本非常低 easyui 最新版本1.3.4，bos开发使用1.3.2版本 ExtJS 2.x 免费，3.x 开始收费 Easy ui 1.2.3版本开始收费 问题：为什么你不用ExtJS ? easy ui 学习成本低，很容易在项目中集成使用，ExtJS 学习成本高昂 EasyUI+tutorial.CHM 官方demo例子 jQuery_EasyUI.doc demo例子 EasyUI-API+1.3.2.chm 中文api jquery.EasyUI-1.3.1+API.chm 英文api jquery-easyui-1.3.2.zip 框架开发包 目录结构分析 demo 示例 locale 国际化信息文件（默认英文提示信息）

plugins 框架功能js文件 src 源码 themes 主题样式 自带5套主题，icons 图标文件 easyloader.js 核心加载器（加载plugins 功能js） jquery-1.8.0.min.js jquery开发js文件 jquery.easyui.min.js easy ui 框架功能js合集 jquery.easyui.min.js == easyloader.js + plugins/* 1.如何在页面中使用easy ui ？ 引入四个文件 2、学习使用easy ui 布局功能 layout 布局控件使用 将body、div 分成东西南北中，五个部分