筛选、事件

筛选

选择器可以完成功能,筛选提供相同函数。
选择器 :first
筛选 first()
对比:
$(“div:first”) 直接获得第一个div (永远只能操作第一个)
$(“div”).first() 先获得所有的div,从所有的中筛选出第一个。 (可以操作第一个,也可以操作所有)

1.过滤
eq(index | -index)  类型 :eq()
	index:正数,从头开始获得指定索引的元素。这个元素的位置是从0算起。0表示第一个
	-index:负数,从尾开始获得指定索引的元素。1算起。 -1表示最后一个
first()	第一个  :first
last()	最后一个  :last
is()		判断
hasClass()	判断是否是指定class 。<xxx class="my">
	这其实就是 is("." + class)。
filter()  筛选出与指定表达式匹配的元素集合
not()	将指定内容删除
--------------------------------
has()  子元素是否有
slice(start , end)  截取元素 ,[2,4)  --> 2,3
map()  jQuery对象 拆分成  jQuery对象数组
2.查找
B.children([...])   获得所有的子元素。CDEF
A.find(D)  从指定的区域查询指定元素。D
D.next()	下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev()	上一个兄弟。D  (previous)
E.prevAll()  前面的所有兄弟。CD
E.siblings()	所有兄弟。CDF
E.parent()  父元素。B
E.closest(A)  向上获得指定的父元素(含自己),如果获得返回一个对象,如果没有没有对象。
------------------------------

C.nextUntil(E)  获得后面所有兄弟,直到指定条件位置。DE
F.prevUntil(D)  获得前面所有兄弟,直到指定条件位置。DE

E.parents()   获得所有的父元素。AB

closest和parents的主要区别是:
(1)前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;
(2)前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;
(3)前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。

3.串联
A.add(B)  将A和B组合一个对象 。类型 $("A,B")
andSelf() : 将之前对象添加到操作集合中
	A.children().andSelf()  
   	A	孩子    孩子和A
end() :回到最近的一个"破坏性"操作之前
	A.children().children().end() .end()  
	A   孩子   孙子		孩子  A
--------------------
contents()  获得所有的子节点(子元素 和 文本)

事件

1.常见事件总结
jQuery 提供额外的事件,用于完善javascript缺失的
focusin 和 focusout
	focusin 获得焦点。js focus。
		focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况。
	focusout 失去焦点。js blur。
		focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况。

mouseenter 和 mouseleave
	mouseenter 鼠标移入。js mouseover
		与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

	mouseleave 鼠标移出。js mouseout
		与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。
2.页面加载

方式1:标准api
$(document).ready(function(){

});
等效
jQuery(document).ready( fn );

方式2:简化版
$(function(){
});
登录
jQuery(function(){
});

3.事件绑定
3.1处理
bind(type ,fn)  给当前对象绑定一个事件。例如:A.bind("click", fn );  类型:A.click( fn );
unbind(type ) 解绑bind绑定事件

one(type ,fn ) 给当前对象绑定一次事件。
-----------------------------------------
on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
off(events) 解绑

trigger(type) 在每一个匹配的元素上触发某类事件。例如:A.trigger("submit")  ,类似 A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作,也不会产生事件冒泡。
3.2委派

live(type , fn) 绑定事件,之后动态添加同样的成员,也具有相同的事件。
die(type) 解绑事件

3.3切换

hover(over , out)
简化版,鼠标移入和移出 ,A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )
toggle( fn , fn , fn ,…) 执行click事件,每点击一次执行一个fn

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 layui 的 table 组件中,可以通过 `initComplete` 和 `onFilter` 事件来实现列筛选功能。 1. `initComplete` 事件 `initComplete` 事件会在表格渲染完成后触发,可以在这个事件中对表格进行一些初始化操作。以下是一个在 `initComplete` 事件中实现列筛选的示例代码: ``` layui.use('table', function(){ var table = layui.table; table.render({ elem: '#tableId', url: '数据接口地址', cols: [[ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: '名称', width: 120 }, { field: 'age', title: '年龄', width: 80 }, { field: 'sex', title: '性别', width: 80 } ]], page: true, limit: 10, height: 'full-200', initComplete: function(){ // 获取表格头部的所有列 var columns = this.config.cols[0]; // 遍历列,为每一列添加筛选功能 for(var i = 0; i < columns.length; i++){ if(columns[i].field){ // 为当前列添加筛选框 var th = $('.layui-table thead th').eq(i); th.append('<input type="text" class="layui-input" lay-filter="' + columns[i].field + '">'); } } } }); }); ``` 在上述代码中,`initComplete` 事件中遍历了表格的所有列,为每一列添加了一个文本框用于筛选。其中,`columns[i].field` 表示列的字段名,可以作为筛选框的 lay-filter 属性值。当用户在筛选框中输入文本时,可以通过 `onFilter` 事件来实现筛选功能。 2. `onFilter` 事件 `onFilter` 事件会在用户点击筛选框或者清空筛选框时触发,可以在这个事件中获取用户输入的筛选条件,并重新渲染表格。以下是一个在 `onFilter` 事件中实现列筛选的示例代码: ``` layui.use('table', function(){ var table = layui.table; table.render({ elem: '#tableId', url: '数据接口地址', cols: [[ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: '名称', width: 120 }, { field: 'age', title: '年龄', width: 80 }, { field: 'sex', title: '性别', width: 80 } ]], page: true, limit: 10, height: 'full-200', initComplete: function(){ // 获取表格头部的所有列 var columns = this.config.cols[0]; // 遍历列,为每一列添加筛选功能 for(var i = 0; i < columns.length; i++){ if(columns[i].field){ // 为当前列添加筛选框 var th = $('.layui-table thead th').eq(i); th.append('<input type="text" class="layui-input" lay-filter="' + columns[i].field + '">'); } } } }); // 监听列筛选事件 table.on('filter', function(obj){ var where = {}; // 获取所有筛选条件 $.each(obj.where, function(key, value){ if(value){ where[key] = value; } }); // 重新渲染表格 table.reload('tableId', { where: where }); }); }); ``` 在上述代码中,`table.on('filter', function(obj){})` 监听列筛选事件,获取所有筛选条件,并通过 `table.reload` 方法重新渲染表格。`obj.where` 表示所有筛选条件组成的对象,其中键值对的键是列的字段名,值是用户输入的筛选条件。在重新渲染表格时,需要将筛选条件作为参数传递给 `table.reload` 方法的 `where` 属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值