jquery常用

Posted 2021-01-15 fengbaba

选择元素：

$("#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") // 选择显示的