码迷,mamicode.com
首页 > Web开发 > 详细

前端--jQuery

时间:2018-09-08 19:59:29      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:基础   reset   按钮   导入   标签   对象   not   索引   禁止用户   

导入jQuery文件:

<script src="jquery-3.3.1.min.js"></script>

 

查找标签

 

基础语法: $/jQuery("语法").方法名()

选择器:找到jQuery对象

不能使用jQuery对象调用原生方法

 

选择器:

例:

console.log($("#d1")[0].innerText);   //根据id查找标签                     id选择器
console.log($(".c1")); //根据样式类查找                     样式类选择器
console.log($("p")); //根据标签名查找                     标签名选择器
console.log($("div.c1")); //找到div标签含有c1样式类的标签             配合使用
console.log($("*")); //找到所有的标签                     所有元素选择器
console.log($("#d1, .c1, span")); //找到符合id为d1的标签或者样式类为c1标签或者span标签 组合选择器
层级选择器:
console.log($("#d1 p")); //在id为d1的标签中找到所有的p标签            
console.log($("#d1 > p")) //在id为d1的标签中找到所有的儿子标签
console.log($("#d2 + span")); //找到在id为d2标签下方并与之紧挨着的span标签
console.log($("span ~ p")); //找到span标签下面的兄弟标签p标签

 

基本筛选器:

例:

console.log($("#d1 > p:last"));       //id为d1标签的最后一个儿子标签
console.log($("#d1 > p:eq(2)")); //id为d1标签中的第3个p标签
console.log($("#d1 > p:even")); //id为d1标签中索引为偶数的(即第奇数个)p标签从0开始
console.log($("#d1 > p:odd")); //id为d1标签中索引为奇数的(即第偶数个)p标签从0开始
console.log($("#d1 > p:gt(1)")); //id为d1标签中索引大于1的p标签即从第二p标签之后的所有的兄弟中的p标签
console.log($("#d1 > p:lt(1)")); //id为d1标签中索引小于1的p标签即从第二p标签之前的所有的兄弟中的p标签
console.log($("#d1 > p:not(‘#d2‘)")); //id为d1标签的儿子标签中的所有p标签中将id为d2的p标签移除
console.log($("#d1 > div:has(p)")); //找到id为d1标签的儿子标签中的div标签中含有p标签的标签

 

属性选择器:

例:

console.log($("[s14]"));              //找到自定义属性为s14的标签
console.log($("input[type=‘text‘]")); //找到类型为text的input标签
console.log($("input[type!=‘text‘]"));//找到除了类型为text以为的input标签

 

表单常用筛选器:

例:

console.log($(":text"));              //找到类型为text的标签
console.log($(":password")); //找到类型为password的标签
console.log($(":submit")); //找到类型为submit的标签
console.log($(":file")); //找到类型为file(上传文件和图片)的标签
console.log($(":radio")); //找到类型为radio的单选框的标签
console.log($(":checkbox")); //找到类型为checkbox的多选框的标签
console.log($(":reset")); //找到类型为reset(重置按钮)的标签
console.log($(":button")); //找到类型为botton(普通按钮)的标签

 

表单对象属性:

例:

console.log($(":enabled"));           //找到用户可以使用的标签
console.log($(":disabled")); //找到禁止用户使用的标签
console.log($(":checked")); //找到有默认值的标签包括复选框中的默认值
console.log($("input:checked")) //找到input标签中有默认值的标签
console.log($(":selected")); //找到复选框中的默认值的标签

 

筛选器方法:

例:

下一个元素:
console.log($("#d3").next()); //找到id为d3标签的下一个标签
console.log($("#d3").nextAll()); //找到id为d3标签下面的所有标签
console.log($("#d3").nextUntil("#d7"));//找到id为d3标签到id为d7标签之间的标签不包括id为d3和d7的标签
上一个元素:
console.log($("#d3").prev()); //找到id为d3标签的下一个标签
console.log($("#d3").prevAll()); //找到id为d3标签上面的所有标签
console.log($("#d3").prevUntil("#d1")); //找到id为d3标签到id为d1标签之间的标签不包括id为d3和d1的标签
父亲元素:
console.log($("#d5").parent()); //找到id为d5标签的父标签
console.log($("#d5").parents()); //找到id为d5标签的祖先标签直到HTML为止
console.log($("#d5").parentsUntil("HTML")); //找到id为d5标签的祖先标签直到HTML,不包括HTML
儿子和兄弟标签:
console.log($("#d").children()); //找到id为d标签的儿子们
console.log($("#d3").siblings()); //找到id为d3标签所有的兄弟标签包括id为d3标签上方的兄弟标签
查找标签:
console.log($("#d").find("p")); //找到id为d1的标签所有的子子孙孙中的p标签 $("#d p")
筛选标签:
console.log($("p#d2")); //找到p标签中有id为d2的p标签 相当于$("p#d2")

 

前端--jQuery

标签:基础   reset   按钮   导入   标签   对象   not   索引   禁止用户   

原文地址:https://www.cnblogs.com/gxj742/p/9610101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!