欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery常用

程序员文章站 2022-03-13 15:54:41
选择元素: $("#id").parent(); //父元素$("#id").parents(); //全部父节点$("#id").parents("p"); //返回是P的父元素$("#id").children(); //返回全部子节点$("#id").children("p"); //返回是p ......


选择元素:

$("#id").parent(); //父元素
$("#id").parents(); //全部父节点
$("#id").parents("p"); //返回是p的父元素
$("#id").children(); //返回全部子节点
$("#id").children("p"); //返回是p的子节点
$("#id").contents(); //返回#id 里面的所有内容 包括节点和文本
$("#id").contents("p") //返回是p的元素里面的节点和文本
$("#id").prev();//上一个兄弟节点
$("#id").prevall();之前所有兄弟节点
$("#id").next();// 下一个兄弟节点
$("#id").nextall();//之后所有的兄弟节点
$("#id").sibings(); //所有的兄弟节点
$("#id").sibings("p") //为p的兄弟节点
$("#id").find("#test1") //遍历子节点为#test1 的节点

元素筛选:

$("ul li").eq(1);// 选取ul li 中匹配的索引顺序是1 的元素 ; 索引顺序从0 开始
$("ul li").first();// 选取ul li 中匹配的第一个元素
$("ul li").last();// 选取ul li 中匹配的最后一个元素
$("ul li").slice(1,4);// 选取索引是 1开始 的 到4结束的节点 不包括1; 负值 (-3,-2) , 则从-2 开始 -3结束 不包括-2
$("ul li").filter(":even"); //选取ul li 中所有奇数顺序的元素 索引顺序是 偶数
$("ul li").filter(".class"); //选择 li 中 有类名为class 的节点;

添加元素:

append(); //在被选元素的结尾插入内容 元素内部
prepend();//在被选元素的开头插入内容 元素内部
after();//在被选元素之后插入内容
before();//在备选元素之前插入内容

设置|获取内容:

html();// html() 获取; // 不能用于表单元素
html(htmlstring) //设置html内容 以上都不能用于 xml 可以用 xhtml文档 ,
html(function(index,oldhtml){ index 为索引顺序 oldhtml 为当前索引的html
// 条件 return html; return 的html 为设置的html
})
text(); //获取元素的文本内容;包括子元素 // 不能用于表单元素
text(string);//设置文本内容
val(); // 获取表单元素 value 值 只能用于表单元素
html(),text(),val(); 都可以使用回调方式来获取|设置

遍历:

each(); 语法: 1,jqeury选择器+each(function(index,item){}) 2,$.each(需要遍历的集合,function(index,item){})
$("li").each(function(index,selector){}) 对象和数组都可以 // 返回false 则停止循环

事件绑定:

选择器.事件名(function(){}) //例: $(".add").click(function(){}) // 不会事件委托
选择器.on("事件名",function(){}) //
选择器.one("事件名",function(){}) //只会触发一次
选择器.one("事件1 事件2 事件3",function(){}) //多个事件绑定一个函数
选择器.one({事件1:function(){},事件2:function(){}}) //多个事件绑定不同函数
$(document).on({事件1:function(){},事件2:function(){}},"选择器1,选择器2,选择器3") 绑定多个选择器
选择器.on("自定义事件名", function(event, 参数){}); //自定义事件
$("button").click(function(){
$("p").trigger("事件名",["anja"]); 触发自定义事件 trigger() 触发所选事件类型
});
选择器.on("事件名", {键:值}, 函数名); function 函数名(e){ e.data.键 }; 传递数据到事件
$("父元素").on("事件名","未创建的子元素",function(){}); //使用于未创建的子元素
tip: 选择器.off("事件名") 移除所绑定的方法 选择器.off() 移除所有绑定方法
unbind("事件名") 移除所绑定的方法 unbind() 移除所有绑定方法
选择器.bind("事件名",function(){}) 没有事件委托不会对新的生效
选择器.delegate("合法的子元素","事件名",function(){}) //seleector 是必须得 必须有子元素
选择器.live(function(){}) // .live 方法1.9+已经删除 主要用 on

判断是否影藏:

if($("#id").is(":hidden")){} // 返回false|true 判断是否影藏
if($("#id").is(":visible")) // 是否显示
$("#id:hidden") // 选择#id影藏的
$("#id:visible") // 选择显示的