江苏龙网

  1. 主页 > 生活百科 > >

jQuery知识整理

JQuery

入口函数/*js加载完成事件*/window.onload=function(){console.log("页面和资源完全加载完毕");}/*jQuery的ready函数*/$(document).ready(function(){console.log("页面dom层渲染完毕---我是完整写法");});$(function(){console.log("页面dom层渲染完毕---我是简写形势");});

  • onload事件和ready函数的区别执行时机不同 onload需要在页面dom层和页面加载的资源全部都加载完成才会执行 ready函数只需要在dom层渲染完毕就会执行，不关心资源是否加载执行次数不同 onload函数在页面中只有一个有效，如果存在多个，后面的覆盖前面的 。ready函数在页面中可以存在多个，按照顺序依次执行
jQuery对象和DOM对象的转换
jQuery对象是一个由DOM对象组成的伪数组，jQuery转DOM使用数组取值的方式，DOM转jQuery使用jQuery的工厂函数 。
//获取jq对象let div=$("div");//数组取值的方式获取DOM对象let divDom=div[0];//get函数获取DOM对象let divDom=div.get(0);//获取DOM对象let box=document.getElementById("box");//使用jq的工厂函数转换/*一般转换来的jq对象，或者自己创建的jq对象取名时，推荐以$开头*/let $box=$(box);jQuery选择器（同css的选择器）
jQuery的选择器和CSS1-3的选择器完全一致，但是jQuery选择器在兼容性上更好 。比如css3的选择器在IE8及以下浏览器中不能使用，但是在jq中可以使用 。而jq1.7以下的版本是可以使用在IE8中的，所以间接实现了在IE8里使用CSS3的选择器 。
基本选择器
  • 通配符选择器
  • ID选择器
  • 类选择器
  • 标签选择器
  • 交集选择器
  • 并集选择器
层级选择器
  • 子代选择器(等价于children函数)
  • 后代选择器(等价于find函数)
//使用选择器的方式实现后代选择$("div p").css("color","red");//使用find函数实现后代选择$("div").find("p").css("color","red");//使用选择器的方式实现子代选择$("div>p").css("color","red");//使用children函数实现子代选择$("div").children("p").css("color","p");过滤选择器//选择所有匹配的li中下标为0的这一个li$("li:eq(0)").css("color","red");//对应函数为eq函数$("li").eq(0).css("color","red");//获取所有匹配的li中下标为奇数的li$("li:odd").css("color","red");//获取所有匹配的li中下标为偶数的li$("li:even").css("color","red");jQuery选择器常用函数 函数名
说明
children(selector)
等价于子代选择器，如果不给参数（等价于给*）表示获取所有子代
find(selector)
等价于后代选择器，不给参数如上
eq(index)
在得到的一组元素中匹配下标为index的那一个
siblings(selector)
查找除了自己以外的兄弟节点，不给参数则找所有 。
next(selector)
查找下一个兄弟节点，如果给定了参数，下一个节点不符合参数要求则不会选中，一般使用时不给参数
prev(selector)
查找上一个兄弟节点，如果给定了参数，上一个节点不符合参数要求则不会选中，一般使用时不给参数
parent()
获取父级节点
parents(selector)
获取所有的父级节点中符合给定的参数要求的第一个这一层级
jQuery操作属性
  • attr和prop的区别prop在jQuery1.7以后版本中可以使用，attr所有版本中都可以使用在1.7版本以后，推荐使用prop函数来操作属性值为布尔类型的属性，比如checked、selected、readonly等 。attr可以操作任意属性（包括自定义属性），prop只能操作原生属性
  • attr和prop获取和操作取值时在匹配到元素中只获取第一个元素的对应属性设置是把匹配到的元素全部都设置属性
//获取属性原生属性---attr和prop结果相同console.log($("div").attr("title"));console.log($("div").prop("title"));//获取属性值和属性名相同的属性console.log($("input").attr("checked"));//选中结果为checked否则undefinedconsole.log($("input").prop("checked"));//选中结果为true否则false//获取自定义属性console.log($("div").attr("zdy"));//可以正常取值console.log($("div").prop("zdy"));//结果为undefined//设置原生属性$("div").attr("title","attr设置的标题"); //可以设置$("div").prop("title","prop设置的标题"); //可以设置//设置属性名和属性值相同的属性$("input").attr("checked",true);//设置选中$("input").attr("checked","checked"); //设置选中，在1.7版本以前只能使用attr设置，推荐使用该方案$("input").attr("checked",false);//设置取消选中//在1.7版本以前取消选中$("input").removeAttr("checked");//设置取消选中$("input").prop("checked",true);//设置选中$("input").prop("checked",false);//设置取消选中//设置自定义属性$("div").attr("zdy2","自定义2");//可以设置属性$("div").prop("zdy2","自定义2");//设置属性无效//一次设置多个属性$("div").attr({title:"一次多个属性",id:"d1"});//attr函数内传递对象的方式批量设置属性/prop函数同理


推荐阅读


上一篇：Python 中的自然语言处理入门

下一篇：去中心化域名ENS为何突然爆火？