jquery 之datatable总结
分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button 或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
语言
"sInfo":"共_TOTAL_页第_START_到_END_页",
"sEmptyTable":"没有数据"
"sInfoFiltered":"从_MAX_条记录中搜索",
"sInfoPostFix": " 底边栏的静态信息",
"sInfoThousands": "格式化信息",//格式化信息用的
"sLengthMenu":"显示
条信息"
"sSearch":"搜索"
基本的命令
aaSorting:参数是个数组 [[],[]]单独定义每一列的排序方式
aaSortingFixed:锁定某一列的排序方式用户不能改变
iDisplayLength:规定每一页的显示数目
aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容最后一个
是”all”]]
bAutoWidth:自动调整列宽
bDestroy:好比重新部署
bFilter:是否启用过滤器
bInfo:是否启用底边信息栏
bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
bProcessing:表格在处理数据时是否要显示信息
sProcessing:定义表格在处理数据时要显示的信息
bScrollAutoCss:是否允许显示滚动条
sScrollY:表格的高度不够的话用滚动条
bScrollCollapse:当设置sScrolly时如果数据没那么高表格是否自适应高度bScrollInfinite:允许无限滚动和google的图片搜索功能一样一滚到最后就自动刷新
sScrollXInner:是个百分比实际就是表格的宽度一样
sScrollX:也是百分比实际就是水平方向滚动条件
bSort:是否启用排序功能
$(document).ready(function() { $('#example').dataTable({ "sScrollX": "100%", //表格的宽度
"sScrollXInner": "110%", //表格的内容宽度
"bScrollCollapse": true, //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false) "bPaginate": true, //是否显示分
页 "bLengthChange": true, //每页显示的记录数 "bFilter": true, //搜索
栏 "bSort": true, //是否支持排序功能 "bInfo": true, //显示表格信
息 "bAutoWidth": false, //自适应宽度
"aaSorting": [[1, "asc"]], //给列表排序，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc "aoColumns": [ null, null, { "bVisible": true, //不可见 "bSearchable": false, //参与搜
索 }, null, null
], //列设置，表有几列，数组就有几项
"bStateSave": true, //保存状态到cookie *************** 很重要，当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
"sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认) "oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "对不起，查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录
", "sInfoEmtpy": "找不到相关数据",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录)", "sProcessing": "正在加载中...", "sSearch": "搜索",
"sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt "oPaginate": { "sFirst": "第一页
", "sPrevious": " 上一页 ", "sNext": " 下一页 ", "sLast": " 最后一
页 " }
}, //多语言配置
"bJQueryUI": false, //可以添加 jqury的ui theme 需要添加css "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]] //设置每页显示记录的下拉菜单 }); });
直接调用默认的设置
$('#example').dataTable();
jQuery 属性操作方法
下面列出的这些方法获得或设置元素的 DOM 属性。
这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。
方法描述
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。
jQuery 文档操作方法
这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。
方法描述
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素之后插入内容。
append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每个匹配的元素之前插入内容。
clone() 创建匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中所有的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
remove() 移除所有匹配的元素。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
replaceAll() 用匹配的元素替换所有匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。
"bScrollCollapse": true,//当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度
"bPaginate": true,//是否分页
"bJQueryUI": true,//是否使用JQueryUI
"sPaginationType": "full_numbers",//分页策略，分页按钮和全页数"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "全部"]], "bLengthChange":true, //每行显示记录数
"oLanguage": {//国际化文件
"sUrl": "include/dataTables_cn.txt"
},
"bSort":true,//让各列具有排序功能
//行选中UI样式，必加
"sDom": '<"H"Tfrl>t<"F"ip>', //bJQueryUI为true时才起作用"bProcessing": true,//开启读取服务器数据时显示正在加载中……"bServerSide": true,//配置DataTable使用服务器端处理
//需要写自定义的action,该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData），
//可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源
jQuery选择器
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")
在$("div + #test")中能取到p段落节点
则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:
Jquery练习题2
单选： 1、下面哪一种不属于Jquery的选择器。（D） A：基本选择器B：层次选择器 C：表单选择器D：节点选择器 2、使用jquery检查元素在网页上是否存在。（B） A：if($("#id")) { //do someing... } B: if($("#id").length > 0) { //do someing... } C: if($("#id").length() > 0) { //do someing... } D: if($("#id").size > 0) { //do someing... } 3、新闻,获取元素title的属性值。（C） A：$("a").attr("title").val(); B：$("#a").attr("title"); C：$("a").attr("title"); D：$("a").attr("title").value; 4、执行下面语句 $(document).ready(function(){ $("#click").click(function(){ alert("click one time"); }); $("#click").click(function(){ alert("click two time"); });
}); 单击按钮，这个会有什么效果。（C） A：弹出一次对话框，显示click one time 。 B：弹出一次对话框，显示click two time 。 C：弹出两次对话框，依次显示click one time，click two time。D：js编译错误。 5、页面中有三个元素，如下：
jQuery获取Select选择的Text和 Value
一、jQuery获取Select选择的Text和Value:语法解释： 1.$("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2.varcheckText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3.varcheckValue=$("#select_id").val(); //获取Select选择的Value 4.varcheckIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值 5.varmaxIndex=$("#select_idoption:last").attr("index"); //获取Select最大的索引值 二、jQuery设置Select选择的Text和Value:语法解释： 1.$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中 2.$("#select_id ").val(4); // 设置Select的Value值为4的项选中 3.$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中 三、jQuery添加/删除Select的Option项：语法解释： 1.$("#select_id").append(""); //为Select追加一个Option(下拉项) 2.$("#select_id").prepend(""); //为Select插入一个Option(第一个位置) 3.$("#select_idoption:last").remove(); //删除Select中索引值最大Option(最后一个) 4.$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 5.$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option 6.$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option 四、获取值 1.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项 的值var item = $('input[@name=items][@checked]').val(); 2.获取select被选中项的文本:var item = $("select[@name=items] option[@selected]").text(); 3.select下拉框的第二个元素为当前选中值:$('#select_id')[0].selectedIndex = 1; 4.radio单选组的第二个元素为当前选中值:$('input[@name=items]').get(1).checked = true; 5.文本框，文本区域：$("#txt").attr("value")； 6.多选框checkbox：$("#checkbox_id").attr("value")； 7.单选组radio：$("input[@type=radio][@checked]").val(); 8.下拉框select：$('#sel').val(); 五、控制表单元素： 1.文本框，文本区域：$("#txt").attr("value",'');//清空内容 2.$("#txt").attr("value",'11');//填充内容 3.多选框checkbox：$("#chk1").attr("checked",'');//不打勾 4.$("#chk2").attr("checked",true);//打勾 5.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 6.单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 7.下拉框select：$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 8.$("").appendTo("#sel")//添加下拉框的option 9.$("#sel").empty()；//清空下拉框 10.//遍历option和添加、移除option functionchangeShipMethod(shipping){ varlen = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each(function(){ if($(this).val() == 111){ $(this).remove(); } }); }else{ $("").appendTo($("select[@name=ISHIPTYPE]")); } } //取得下拉選單的選取值 $(#testSelectoption:selected').text(); 或$("#testSelect").find('option:selected').text(); 或$("#testSelect").val(); 六、下拉框: 1.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) 2.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值 3.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值 4.$("#select").empty();//清空下拉框//$("#select").html(''); 5.$("").appendTo("#select")//添加下拉框的option 稍微解释: 1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素里面的具有selected 属 性的option 元素；可以看出有@开头的就表示后面跟的是属性。 2.单选框:
jQuery选择器的工作原理和优化
jQuery选择器的工作原理和优化 至于有那些选择器，在帮助手册中都有，自己去看，这篇主要是分析他的工作原理，而优化我们写的选择器，尤其在页面内容很多的情况下，更应该需要优化。下边就言归正传。 每次申明一个jQuery对象的时候，返回的是 jQuery.prototype.init 对象，很多人就会不明白，init明明是jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可以实现继承，加上js的对象只是引用不会是拷贝，new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同，这里就不讲原因了，等下一篇再讲为什么会是这样。 当我们使用选择器的时候$(selector,content)，就会执行 init(selectot,content)，我们看看inti中是怎样执行的： if ( typeof selector == "string" ) { //正则匹配，看是不是HTML代码或者是#id var match = quickExpr.exec( selector );
//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。 //selector是#id的形式 if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) //HTML代码,调用clean补全HTML 代码 if ( match[1] ){ selector = jQuery.clean( [ match[1] ], context ); } // 是: $("#id") else {
JQuery基础、选择器
jQuery入门 什么是jQuery jQuery是一个JavaScript库，通过封装原生的JavaScript函数得到一整套定义好的方法。它是JohnResig于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。以最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。 主旨：以更少的代码、实现更多的功能（write less ,do more!） 官网：https://www.360docs.net/doc/9415752697.html,/ jQuery的功能和优势 jQuery作为JavaScript封装的库，它的目的就是为了简化开发者使用JavaScript。主要功能有以下几点： 像CSS那样访问和操作DOM； 修改CSS控制页面外观； 简化JavaScript代码操作； 事件处理更加容易； 各种动画效果使用方便； 让Ajax技术更加完美； 基于jQuery大量插件； 自行扩展功能插件。 jQuery最大的优势，就是特别的方便。比如模仿CSS获取DOM，比原生的JavaScript
要方便太多。并且在多个CSS设置上的集中处理非常舒服，而最常用的CSS功能又封装到单独的方法。 最重要的是jQuery的代码兼容性非常好，你不需要总是头疼着考虑不同浏览器的兼容问题。 其他JavaScript库 目前除了jQuery，还有5个JS库较为流行，他们分别是YUI、Prototype、Mootools、Dojo和ExtJS。 YUI，是雅虎公司开发的一套完备的、扩展性良好的富交互网页工具集。 Prototype，是最早成型的JavaScript库之一，对JavaScript内置对象做了大量的扩展。 Dojo，Dojo强大之处在于提供了其他库没有的功能。离线存储、图标组件等等。 Mootools，轻量、简洁、模块化和面向对象的JavaScript框架。 ExtJS，简称Ext，原本是对YUI的一个扩展，主要创建前端用户界面。(付费的) jQuery代码的编写 配置jQuery环境 1、获取jQuery最新版本 从官网下载：https://www.360docs.net/doc/9415752697.html,/ 3、jQuery环境配置 jQuery不需要安装，把下载的jQuery.js放到网站上的一个公共位置，想要在某个页面上使用jQuery时，只需在该HTML文档中引入该库文件即可。 4、在页面中引入jQuery 由于jQuery是JavaScript的一个库文件，也就是jQuery本质是一个.js文件，所以使用引入。 简单的jQuery示例
jquery常用的选择器整理
jquery: 基本的选择器： $('#id').css('color','blue');//根据id属性为id，设置css样式颜色设置成蓝色 $('h2').css('background-color','pink'); $('input').css('width','500px'); $('.apple').css('background-color','lightgreen');//class属性值查找 $('*').css('background-color','gray');//通配符 $('h2,#usertel,#userqq').css('color','lightblue');//联合选择器 层次选择器： $('div span');//在div内部获得span节点，不考虑层次,只获得div内第一个span节点，，注意不考虑层次 $('div > span')//在div内部获得子元素span节点 $('div+span')//在div后边获得紧紧挨着的第一个兄弟关系的span节点，获得的是span节点 $('div~span')//在div后边后边获得全部兄弟关系的span节点 并且选择器： $('li').css('color','red'); $('li:first');//:first第一个 :last 最后一个 $('li:eq(3)').css('color','red')//eq(下标索引号码) 获得节点的下标索引值与给定索引值相等 gt(索引号) great than 节点索引值，大于某个范围 lt(索引值) less than 节点索引值，小于某个范围 $('li:gt(5)').css('background-color','pink'); $('li:lt(5)').css('background-color','orange'); :even 匹配到下标索引值为偶数的节点 :odd 匹配到下标索引值为奇数的节点
jQuery选择器种类
jQuery选择器种类 由于经常使用jQuery，但是其中的很多选择器又不太能够熟练记牢使用，所以趁着上周有人分享，我再仔细的把jQuery的选择器过一遍，争取一次拿下，以后做到运用自如。jQuery选择器主要来分可以分为三种：（1）基本选择器（2）层次选择器（3）过滤选择器(4) 表单选择器 1、基本选择器 基本选择器主要就是比较常见和常用的集中，是必须要掌握的。 #ID id选择器返回一个对象$("#div") .class类选择器返回集合$(".content") Element 标签选择器返回集合$("input") * 匹配所有元素返回集合$("*") selector1,selector2,selector3,....合并每个选择器匹配的元素，返回集合$("#div,.class,input") 2、层次选择器（主要是选择层次下面的元素） $("E F") 选择E元素中的所有F后代元素(注意：是子孙元素) 返回集合 $("P>C") 选择P元素下的C子元素（注意：是子元素）返回集合 $("P+N") 选择P元素后的相邻元素（即下一个兄弟元素），和$("P").next("N")方法执行效果相同 $("P~S") 选择P元素之后的所有S兄弟元素，和$("P").nextAll("S")方法执行效果相同，另pre()方法和next()方法相对。preAll()和nextAll()相对。 注意siblings()方法和nextAll()方法的区别：siblings()是所有前后的兄弟元素，nextAll()是所有后面的兄弟元素 第三和第四个选择器常常用后面的写法代替
Jquery和JS获取ul中li标签
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签或 var div=document.getElementById('a'); var ul=div.childNodes.item(0); var lis=ul.childNodes; for(var i=0;i
Jquery选择器分类应用(最全最新)
现在我们开始Jquery 的选择器之旅哈哈。 下面的选择器分类中， 带有“过滤器”的分类表示是“过滤”选择器， 否则就是“选择”功能的选择器。 jQuery 选择器分为如下几类： ［说明］ 1.点击“名称”会跳转到此方法的jQuery 官方说明文档。 2.可以在下节中的jQuery 选择器实验室测试各种选择器 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id 选择 $("divId") 选择ID 为divId 的元素 element 根据元素的名称选择, $("a") 选择所有元素 .class 根据元素的css 类选择 $(".bgRed") 选择所用CSS 类为bgRed 的 元素 * 选择所有元素 $("*")选择页面所有元素 selector1, selector2, selectorN 可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几 个选择器匹配的内容. $("#divId, a, .bgRed") ［学习建议］： 大家暂时记住基础选择器即可， 可以直接跳到下一节“jQuery 选择器实验室”进行动手练习， 以后再回来慢慢学习全部的选择器， 或者用到的时候再回来查询。 2.层次选择器 Hierarchy
child必须包含在parent中并且父类是 parent元素.选择CSS类为myList元素中的直接子节点
JQuery深刻理解
JQuery深刻理解 一：导言 有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。 二：普及JQuery知识 知识1：用JQuery写插件时，最核心的方法有如下两个： $.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object) 可以理解为JQuery实例添加一个方法。 基本的定义与调用： /* $.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.extend({ fun1: function () { alert("执行方法一"); } }); $.fun1(); /* $.fn.extend 定义与调用 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ $.fn.extend({ fun2: function () { alert("执行方法2"); } }); $(this).fun2(); //等同于 $.fn.fun3 = function () { alert("执行方法三"); } $(this).fun3(); 知识2:jQuery(function () { }); 与(function ($) { })(jQuery);的区别： jQuery(function () { }); //相当于 $(document).ready(function () { }); /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ (function ($) { })(jQuery); //相当于 var fn = function ($) { }; fn(jQuery);
JQUERY选择器按照功能主要分为
- jquery CSS和xpath选择器
- 精通jQuery选择器使用
- jQuery获取Select选择的Text和 Value
- jquery常用的选择器整理
- JQuery深刻理解
- jquery试题与答案
- jquery试题
- jQuery笔记整理
- Jquery
- JQUERY选择器按照功能主要分为
- jQuery选择器总结(全)
- Jquery练习题2
- JQuery基础、选择器
- JQUERY选择题
- 04课堂练习-BTC-Jquery-01-Jquery过滤选择器案例
- 实验一 jQuery选择器
- jQuery精品教程资料：1-jQuery基础
- Jquery和JS获取ul中li标签
- 第2讲、Jquery基本选择器
- JQuery语法