天道酬勤,学无止境

jQuery选择器总结

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法
               
$("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")           选择所有的div标签元素,返回div元素数组
$(".myClass")      选择使用myClass类的css的所有元素
$("*")             选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass")
               
层叠选择器:
$("form input")         选择所有的form元素中的input元素
$("#main > *")          选择id值为main的所有的子元素
$("label + input")     选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")       同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
               
基本过滤选择器:
$("tr:first")               选择所有tr元素的第一个
$("tr:last")                选择所有tr元素的最后一个
$("input:not(:checked) + span") 
               
过滤掉:checked的选择器的所有的input元素
               
$("tr:even")               选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
               
$("tr:odd")                选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")             选择td元素中序号大于4的所有td元素
$("td:ll(4)")              选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器:
               
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty")           选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)")        选择所有含有p标签的div元素
$("td:parent")          选择所有的以td为父节点的元素数组
可视化过滤选择器:
               
$("div:hidden")        选择所有的被hidden的div元素
$("div:visible")        选择所有的可视化的div元素
属性过滤选择器:
               
$("div[id]")              选择所有含有id属性的div元素
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素
               
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
               
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素
$("input[name*='man']")          选择所有的name属性包含'news'的input元素
               
$("input[id][name$='man']")    可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
               
子元素过滤选择器:
               
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
               
$("div span:first-child")          返回所有的div元素的第一个子节点的数组
$("div span:last-child")           返回所有的div元素的最后一个节点的数组
$("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组
               
表单元素选择器:
               
$(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button
               
$(":text")                     选择所有的text input元素
$(":password")           选择所有的password input元素
$(":radio")                   选择所有的radio input元素
$(":checkbox")            选择所有的checkbox input元素
$(":submit")               选择所有的submit input元素
$(":p_w_picpath")                 选择所有的p_w_picpath input元素
$(":reset")                   选择所有的reset input元素
$(":button")                选择所有的button input元素
$(":file")                     选择所有的file input元素
$(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域
               
表单元素过滤选择器:
               
$(":enabled")             选择所有的可操作的表单元素
$(":disabled")            选择所有的不可操作的表单元素
$(":checked")            选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
               
                
               
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
               
名字以”S_”开始,并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
               
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
               
                
               
                
               
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
               
1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点
               
例子:找到表单中所有的 input 元素
               
HTML 代码:
               
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
               
$("form input")
结果:
               
[ <input name="name" />, <input name="newsletter" /> ]
               
2. $("A>B") 查找A元素下面的直接子节点
例子:匹配表单中所有的子级input元素。
               
HTML 代码:
               
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
               
$("form > input")
结果:
               
[ <input name="name" /> ]
               
3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
例子:匹配所有跟在 label 后面的 input 元素
               
HTML 代码:
               
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
               
$("label + input")
结果:
               
[ <input name="name" />, <input name="newsletter" /> ]
               
               
4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
例子:找到所有与表单同辈的 input 元素
               
HTML 代码:
               
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
               
$("form ~ input")
结果:
               
[ <input name="none" /> ]


原文请点击这里查看




受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • JavaScript知识点总结(四)
    jQuery常用选择器和过滤选择器 使用方法 下载Jquery文件库,保存在站点js文件夹中,使用script标签引入,放在head标签内 window.οnlοad=function()可简化为$(function) window.οnlοad=function(){ … 页面加载事件 } $(function){ …页面加载事件 } 下面的是上面的简化方式 jQuery的选择器 基本选择器 $("#id") :id选择器 $("div") :div选择器 $(".class") :类选择器 $(".class,.class2,#id") :组合选择器 层次选择器 $("#id>.class") :子元素选择器 $("#id .class") :后代选择器 $("#id+.class") :紧邻下一个元素选择器 $("#id~.class") :兄弟元素选择器 表单选择器 $(":input")//获取inpu。textarea,select,button元素 $(":text")//所有的单行文本框 $(":text")等价于$("[type=text]"),推荐使用$("input:text")效率更高$(":password") //获取type=password的input元素 $(":radio") //获取type=radio的input元素 $(":checkbox
  • JavaScript个人学习笔记总结 - jQuery
    内容网址JavaScript个人学习笔记总结 - 快速入门https://blog.csdn.net/weixin_50594210/article/details/115112096?spm=1001.2014.3001.5501JavaScript个人学习笔记总结 - 函数https://blog.csdn.net/weixin_50594210/article/details/115113081?spm=1001.2014.3001.5501JavaScript个人学习笔记总结 - 标准对象https://blog.csdn.net/weixin_50594210/article/details/115112683?spm=1001.2014.3001.5502JavaScript个人学习笔记总结 - 面向对象编程https://blog.csdn.net/weixin_50594210/article/details/115113024?spm=1001.2014.3001.5502JavaScript个人学习笔记总结 - 浏览器https://blog.csdn.net/weixin_50594210/article/details/115113131JavaScript个人学习笔记总结 - jQueryhttps://blog.csdn.net/weixin
  • web前端javascript+jquery知识点总结
    Javascript javascript 在前端网页中占有非常重要的地位,可以用于验证表单,制作特效等功能,它是一种描述语言,也是一种基于对象(Object)和事件驱动并具有安全性的脚本语言 ,语法同java类似,是一种解释性语言,边执行边解释。 JavaScript的组成: ECMAScipt 用于描述: 语法,变量和数据类型,运算符,逻辑控制语句,关键字保留字,对象。浏览器对象模型(Browser Object Model,BOM)用于同HTML的交互,如弹出一个警示框,询问框,输入框…文档对象模型(Document Object Model,DOM)用于操作HTML的文档节点如鼠标,键盘,的移动按下的触发事件。 基本语法 <script type="text/javascript"> //Jacascript 语句 <!-- 可将script语句写入此处,忽略浏览器差异! --> document.write("初学JavaScript"); document.write("<h1>Hello,Javascript</h1>"); <script> type=“text/javascript” 在HTML5中可以省略 执行原理 解析HTML标签和JavaScript然后浏览器向服务器发送请求包含js的请求页面,服务器解析完成后返回包含js的响应页面给客户端。 优点
  • jQuery中的DOM操作(初学总结)
    目录 一、操作样式1. css()方法2. 类样式方法 二、操作内容三、操作尺寸四、操作属性五、操作节点1.获取节点:2.创建节点:3.插入节点:4.删除节点:5.复制节点:6.替换节点:7.包裹节点:8.遍历节点: 一、操作样式 1. css()方法 专门用来设置css属性的。 <script> $("div").css("color"); //读取div元素的color属性值 $("div").css("color", "red"); //设置div元素的color属性值 //设置多个属性值 $(“div”).css(“color”, “red”).css(“width”, “300”).css(“height”, “200”).css(“background-color”, “pink”); $(“div”).css({color: “red”, width: 300, height: 200, “background-color”: “pink”}); //效果和上面链式写法一样 $(“div”).css({ color: “red”, width: 300, height: 200, “background-color”: “pink” }); //推荐写法 </script> 注意:属性名中带 “ - ” 的属性要放在双引号里。 2. 类样式方法
  • 是否可以使用多个变量而不是jQuery中的选择器(Is it possible to use multiple variables instead of selectors in jQuery)
    问题 我知道执行以下操作会更快: var $header = $("#header"); $header.css({color:"#ff0000"}); $header.find("a").addClass("foo"); 代替: $("#header").css({color:"#ff0000"}); $("#header a").addClass("foo"); 因为jQuery无需在DOM中再次查找元素,因为我们直接引用了它们。 假设我有这个: var $header_elements = $("#header li"); var $footer_elements = $("#footer li"); 而且我分别将它们用于一些jQuery操作。 但是然后,我需要对两者都做一些事情。 使用选择器,我会这样做: $("#header li, #footer li").css({color:"#ff0000"}); 但随后,需要再次解析DOM以找到匹配的元素。 有没有办法使用我之前声明的变量而不是新的选择器? 像下面的内容(这是不工作的,我知道,这是给什么我正在寻找一个想法): $($header_elements + $footer_elements).css({color:"#ff0000"}); 我认为选择器返回某种数组或对象。 我正在寻找的是一种合并这些方法的方法。
  • JavaScript:基础知识总结 -- 狂神视频讲解部分笔记
    文章目录 JavaScript:吐槽:1、引入JavaScript:2、基本语法入门:3、数据类型:number:3.1、字符串:3.2、数组3.3、对象:3.4、流程控制3.5、Map 和 Set 集合:3.6、iterator 遍历: 4、函数:4.1、定义一个函数:4.2、变量作用域:4.3、方法: 5、内部对象:5.1、Date:5.2、Json 对象 6、操作BOM 对象7、操作DOM对象:1、获得DOM节点2、更新DOM节点:3、删除DOM节点:4、插入节点: 8、操作表单:9、JQuery:1、获取Jquery:2、jquery 公式:3、jquery 选择器:4、jquery 事件:5、jquery 操作DOM 元素 10、总结: JavaScript: 吐槽: ​ 最近学习后端Java的时候,发现前端知识太弱了,于是,哈哈,即将步入大三的小弟弟不得不重新拾起 前端的知识,前端知识哪家强,B站服务到你家,不得不说,**B站的资源是真的丰厚。**于是就看到了狂神说的视频,讲的还是不错的,使得对前端知识有了一个大致的理解。 ​ 以下是根据学的知识总结的一张图(可能不全,但是是主要的): ​ 以上就是大致的内容了,相关的练习代码已经上传到 GitHub 上,有兴趣的小伙伴可以自行下载,不过还是建议自己手敲一遍,本文是本人对 JavaScript 的学习总结笔记
  • jQuery:如何查找不包含按钮的第一个可见输入/选择/文本区域?(jQuery: how to find first visible input/select/textarea excluding buttons?)
    问题 我试过了 $(":input:not(input[type=button],input[type=submit],button):visible:first") 但找不到任何东西。 我怎么了 UPD:我在$(document).load()上执行此操作 <script type="text/javascript"> $(window).load(function () { var aspForm = $("form#aspnetForm"); var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm); firstInput.focus(); }); </script> 在调试中,我可以看到firstInput为空。 UPD2:我在Sharepoint下运行的ASP.NET页面中。 到目前为止,我发现对于某些元素,确实可以找到它们(对于固定的元素),而对于某些则找不到。 :( 回答1 为什么不仅仅针对您想要的对象(演示)? $('form').find('input[type=text],textarea,select').filter(':visible:first'); 编辑 或使用jQuery:input选择器过滤表单后代。 $
  • 麦子学院python百度云_麦子学院python
    之前群里面很多人找我要,虽然网上有,但是网上的不齐全,我这里已经更新同步官网,如果官网更新我还会继续给大家更新,视频也有讲安全知识。大体上来说讲得还过得去。 游客,如果您要查看本帖隐藏内容请回复 第一阶段:python基础准备:Web前端开发之HTML+CSS基础入门: 课程章节 1.课程介绍 2.html的语法 3.html的基本结构 4.html的文档设置标记上(格式标记) 5.html的文档设置标记下(文本标记) 6.html图像标记img 7.html超链接的使用 8.html表格相关的标记 9.html表格实战《简单的网页布局》 10.html框架详解与框架布局实战 11.HTML表单设计(上) 12.HTML表单设计(下) 13.使用CSS样式的方式 14.定义CSS样式(CSS选择器) 15.CSS常用属性(颜色属性) 16.css常用属性(字体相关属性) 17.css常用属性(背景相关属性) 18.css常用属性(文本属性) 19.css常见属性(边框属性) 20.css常见属性(列表属性) 21.Div+Css布局(div+span以及盒模型) 22.Div+Css布局(布局相关的属性) 23.Div+Css布局(浮动以及溢出处理) 24.IE兼容测试工具与高效开发工具 25.实战项目(从效果图到网页布局以及按需切图) 26.实战项目(网页头部及搜索框的制作)
  • 黑马程序员Java 全课程目录【999集】
    视频链接 : https://www.bilibili.com/video/BV1uJ411k7wy下面是 999集全课程目录,tips : [ ctrl +f ] 序号视频名称101_Java语言发展史202_计算机进制转换303_计算机存储单元404_命令提示符_基本介绍505_命令提示符_常用命令606_Java语言的跨平台性707_JDK、JRE与JVM808_JDK的下载与安装909_环境变量的配置1010_HelloWorld程序的代码编写1111_HelloWorld程序的编译运行1212_-HelloWorld的常见问题与Notepad++使用1313_程序注释与HelloWorld说明1414_关键字的概念与特征1515_标识符的概念与规则1616_常量的概念与分类(1)1717_常量的打印输出1818_基本数据类型1919_变量的概念与定义格式2020_变量的基本使用2121_变量的注意事项2201_数据类型转换_自动转换2302_数据类型转换_强制转换2403_数据类型转换_注意事项2504_ASCII编码表2605_算术运算符_四则与取模运算2706_算术运算符_加号的多种用法2807_算术运算符_自增自减运算符2908_赋值运算符3009_比较运算符3110_逻辑运算符3211_三元运算符3312_方法入门_概念引入3413_方法入门_方法的定义3514
  • Java全套课程修炼之Java小白入门篇
    温馨提示: 1、本文并非Java的唯一学习路线,程序羊仅仅是怀着分享的动力来汇总,仅供参考。如有争议,请及时联系程序羊。 2、看完此文之后,能不能全都学会,程序羊不敢保证,但是,唯一可以知道的一点就是,您至少应该知道按什么学习路线去学习Java了,并且可以学到一些,或许你还没有了解到的知识。 3、如果您觉得本文对您有用,可以收藏好,并给程序羊点个赞,以示鼓励,喜欢的朋友也可以点个关注喔,程序羊会不定时给您更新更多的干货。 阶段1 Java语言基础 1-1-Java基础语法 第1节 java运行环境 1_1_1_01_Java语言发展史 1_1_1_02_计算机进制转换 1_1_1_03_计算机存储单元 1_1_1_04_命令提示符_基本介绍 1_1_1_05_命令提示符_常用命令 1_1_1_06_Java语言的跨平台性 1_1_1_07_JDK、JRE与JVM 1_1_1_08_JDK的下载与安装 1_1_1_09_环境变量的配置 第2节 HelloWorld案例 1_1_2_10_HelloWorld程序的代码编 1_1_2_11_HelloWorld程序的编译 1_1_2_12_HelloWorld的常见问题 1_1_2_13_程序注释与HelloWorld 第3节 关键字&标识符 1_1_3_14_关键字的概念与特征 1_1_3_15_标识符的概念与规则 第4节 常量&变量
  • 如何获得$(this)选择器的子级?(How to get the children of the $(this) selector?)
    问题 我有一个与此类似的布局: <div id="..."><img src="..."></div> 并希望使用jQuery选择器在单击时选择div内的子img 。 要获得div ,我有以下选择器: $(this) 如何使用选择器获取子img ? 回答1 jQuery构造函数接受一个名为context的第二个参数,该参数可用于覆盖选择的上下文。 jQuery("img", this); 这与使用.find()一样,如下所示: jQuery(this).find("img"); 如果您想要的img仅是clicked元素的直接后代,则还可以使用.children(): jQuery(this).children("img"); 回答2 您也可以使用 $(this).find('img'); 这将返回所有div后代img 回答3 如果您需要将第一个img降低一个级别,则可以执行 $(this).children("img:first") 回答4 如果您的DIV标签后面紧跟着IMG标签,则还可以使用: $(this).next(); 回答5 直接的孩子是 $('> .child-class', this) 回答6 您可以找到父div的所有img元素,如下所示 $(this).find('img') or $(this).children('img') 如果您想要特定的img元素
  • 2021年最新Java的学习路线来了~
    一门永不过时的编程语言——Java 软件开发,5G时代,万物互联,更多的终端会使用安卓系统,随之而来的Java开发必然是会越来越火爆,所以学习Java是必要且必须的,下边就是总结了下Java的学习路线~ 【需要java资料的私信我免费领取】 Java编程语言占比: 据官方数据统计,在全球编程语言工程师的数量上,Java编程语言以1000万的程序员数量位居首位。 而且很多软件的开发都离不开Java编程,因此其程序员的数量最多。而在以Java编程为核心的开发领域中,javaEE程序员的需求量10年来一直居于首位! Java工程师就业: 1.通过各大招聘网站统计,全国海量公司都在招聘Java开发工程师 2.北京Java开发工程师平均薪资,即16788元 3.全国Java开发薪资前三:北京 上海 广州 工具/原料 Java学习路线Java学习大纲 Java基础课程 1 Java基础课程内容涉及:Java开发介绍、Java数组、Java面向对象、常用基础类、集合、IO流、多线程、异常、反射。 第一部分:Java开发介绍 DOS常用命令 JVM、JRE、JDK之间的关系 Java开发环境的搭建:安装JDK,配置环境变量 Java入门程序(Java的开发流程) Java的注释,标识符、标识符的命名规范 Java基本数据类型 变量和常量的定义及初始化 Java的运算符 运算符的优先级
  • 2020Java学习路线(珍藏版)
    一门永不过时的编程语言——Java 软件开发,虽然我是做C/C++开发的,但是也是学习过并且之后肯定还要继续学习Java的,原因就是5G时代,万物互联,更多的终端会使用安卓系统,随之而来的Java开发必然是会越来越火爆,所以学习Java是必要且必须的,下边就是总结了下Java的学习路线 Java编程语言占比: 据官方数据统计,在全球编程语言工程师的数量上,Java编程语言以1000万的程序员数量位居首位。 而且很多软件的开发都离不开Java编程,因此其程序员的数量最多。而在以Java编程为核心的开发领域中,javaEE程序员的需求量10年来一直居于首位! Java工程师就业: 1.通过各大招聘网站统计,全国海量公司都在招聘Java开发工程师 2.北京Java开发工程师平均薪资,即16788元 3.全国Java开发薪资前三:北京 上海 广州 工具/原料 Java学习路线Java学习大纲 Java基础课程 1 Java基础课程内容涉及:Java开发介绍、Java数组、Java面向对象、常用基础类、集合、IO流、多线程、异常、反射。 2 第一部分:Java开发介绍 DOS常用命令 JVM、JRE、JDK之间的关系 Java开发环境的搭建:安装JDK,配置环境变量 Java入门程序(Java的开发流程) Java的注释,标识符、标识符的命名规范 Java基本数据类型
  • 悬停子元素时如何设置父元素的样式?(How to style the parent element when hovering a child element?)
    问题 我知道不存在CSS父选择器,但是在不使用此类选择器的情况下将子元素悬停时是否可以设置父元素样式? 举个例子:考虑一个删除按钮,将其悬停时将突出显示将要删除的元素: <div> <p>Lorem ipsum ...</p> <button>Delete</button> </div> 通过纯CSS,当鼠标悬停在按钮上方时,如何更改此部分的背景颜色? 回答1 好吧,这个问题之前已经被问过很多次了,最简单的典型答案是:纯CSS不能做到这一点。 名称:级联样式表仅支持级联方向的样式,不支持向上的样式。 但是,在大多数情况下,如给定示例一样,希望达到这种效果,仍然有可能使用这些级联特性来达到所需的效果。 考虑以下伪标记: <parent> <sibling></sibling> <child></child> </parent> 诀窍是使同级兄弟与父级具有相同的大小和位置,并为同级兄弟而不是父级设置样式。 这看起来像是父样式! 现在,如何给同胞定型? 当孩子被悬停时,父母也是如此,但兄弟姐妹却没有。 兄弟姐妹也一样。 总结出三种可能的CSS选择器路径来设置同级样式: parent sibling { } parent sibling:hover { } parent:hover sibling { } 这些不同的路径提供了一些不错的可能性。 例如,在问题示例中释放此技巧将导致以下错误:
  • 2020年最新黑马Web大前端之3天学会jQuery
    2020年最新黑马Web大前端之3天学会jQuery 【课程目录】 jquery01 01.jquery的简介.mp4 02.jquery的基本使用.mp4 03.jquery和js的代码对比.mp4 04.jquery的$的本质.mp4 05.jquery对象和dom元素互转.mp4 06.jquery的基本选择器.mp4 07.jquery的基本&过滤&层级选择器.mp4 08.jquery的筛选选择器以及补充.mp4 09.案例讲解.mp4 10.上午总结.mp4 11.京剧小人的案例.mp4 12.360开机动画.mp4 12.jquery的显示与隐藏.mp4 12.自定义动画.mp4 13.修改下拉菜单.mp4 13.淡入淡出轮播图.mp4 14.jquery的fade动画队列.mp4 15.jquery的class相关操作以及选项卡.mp4 16.jquery的css方法.mp4 jquery02 01.jquery的回顾.mp4 02.stop方法.mp4 03.dom元素创建以及添加方式.mp4 04.attr属性操作方法.mp4 04.表格创建案例.mp4 05.美女相册案例.mp4 06.留言框案例.mp4 07.this指向问题.mp4 08.jquery的offset&position位置方法.mp4 09.scrollTop方法.mp4 10.表格全选案例
  • 2021-03-09
    JQuery 基础笔记 JQuery 基础笔记 jQuery 概述 1.1 jQuery 是什么? 1.2 jQuery 简单应用 1.3 jQuery 功能应用 1.4 jQuery 技术优势 1.5 jQuery 下载安装 1.6 jQuery 使用方法 1.7 jQuery 基本语法结构 1.8 jQuery 语法特性jQuery 入口函数 2.1 jQuery 与JavaScript 加载模式对比 2.2 jQuery 其他写法 2.3 解决$符号冲突问题 2.3.1 释放 $ 使用权 2.3.2 自定义访问符号 2.4 jQuery 核心函数DOM 对象和 jQuery 对象 3.1 DOM 对象和 jQuery 对象区别 3.2 DOM 对象和 jQuery 对象转化 3.3 DOM 对象和 jQuery 对象的获取 3.4 DOM 对象和 jQuery 对象的练习 3.5 jQuery 对象的本质jQuery 选择器 4.1 基础选择器 4.2 层次选择器 4.2.1 层次选择器练习 4.3 属性选择器 4.4 过滤选择器 4.4.1 基本过滤选择器 4.4.2 可见性过滤选择器 4.4.3 内容过滤性选择器jQuery Class 操作 5.1 Class 类操作 5.1.1 addClass 5.1.2 removeClass 5.1.3 toggleClass
  • jQuery和$问题(jQuery and $ questions)
    问题 我正在修改一些包含很多jQuery的代码,但不确定某些jQuery语句在做什么。 jQuery代码的顶部有 jQuery.noConflict * 1。 我明白那个。 但是然后有一些代码具有: <script type="text/javascript"> (function($) { $(document).ready(function() { jQuery.fn.fixEmail = function() { { return $(this).each(function() { var $s = $(this); ...code... } } </script> 我知道由于noConflict而使用了jQuery。 参数$是什么? * 2。 在另一个功能中,他们使用 <script type="text/javascript"> jQuery(function(){ var $ = jQuery; var cc = { mode : 'teaser', featureVisible : true, $loader : '<p class="loadingAnimation"><img height="32" src="' + config.xoImgUrl + '/images/ajax-loader.gif" width="32" /></p>', ....more
  • hexo使用next主题更新文章报错页面空白
    问题描述: hexo更新主题next报错应用程序未找到 hexo版本:3.7.1 next版本:7.4.1 报错信息: 解决过程: 定位报错文章 一步步重现我更新的操作,发现时移入文章后开始报这个错,然后定位报错的文章(一个个试看哪个移动后报错),定位到了如下文章: --- title: 目前流行的组件库有哪些?css,js各有哪些流行的库? categories: - 层叠样式表CSS - 深度思考 date: 2019-10-11 22:17:53 tags: --- # CSS流行组件库 ## Bootstrap Bootstrap,让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件,还有强大的支持十几的JavaScript、jQuery插件以及组件定制等。 Bootstrap中文网地址:http://www.bootcss.com/ # JS流行组件库 ## jQuery jQuery是最常用的JavaScript库,它革命性的在客户端开发,将CSS选择器引入到DOM节点检索加链接来应用事件处理程序,动画和Ajax调用.jQuery近年来备受青睐,对于一个很需要的的JavaScript的功能的项目来说
  • Jsoup+HttpClient爬取网页指定内容
    最近学习了Jsoup,做一些必要的笔记,一来是对自己学习的知识的巩固,二来对有同样问题的人有参考作用 文章目录 一 Jsoup简介二 Jsoup主要功能三 获取元素常用方法四 爬取网页内容举例五 总结 一 Jsoup简介 jsoup是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。 二 Jsoup主要功能 从一个URL,文件或字符串中解析HTML;使用DOM或CSS选择器来查找、取出数据;可操作HTML元素、属性、文本; 注意:jsoup是基于MIT协议发布的,可放心使用于商业项目。 三 获取元素常用方法 Document doc = Jsoup.parse(content); // 解析网页 得到文档对象 doc.getElementsByTag("title"); // 获取tag是title的所有DOM元素 doc.getElementById("nav_top"); // 获取id=nav_top的DOM元素 doc.getElementsByClass("card"); // 根据样式名称来查询DOM元素 doc.getElementsByAttribute("width"); // 根据属性名来查询DOM元素 doc
  • 小程序之组件和API总结
    小程序之组件和API总结 文章目录 小程序之组件和API总结前言一、组件1.1 视图容器1.1.1 普通视图容器 `view`1.1.2 可滚动的视图容器 `scroll-view`1.1.3 轮播图容器组件和轮播图item组件 `swiper 和 swiper-item`在<swiper-item>中可以包含文本或图片, 其宽/高默认为 100% 。 1.2 基础内容1.2.1 文本组件,类似于HTML中的span `text`1.2.2 富文本组件,支持把 HTML 字符串渲染为 WXML 结构 `rich-text`1、HTML String方式渲染2、节点方式渲染`元素节点``文本节点` 1.3 表单组件1.3.1 按钮组件 `button` 1.4 导航组件 `navigator`1.4.1 声明式导航导航到 tabBar 页面 `...`url的写法是/pages加目标文件夹加文件加文件夹名字 `从mine页面导航到score页面应该这样写 /pages/score/score` 导航到非tabBar 页面 `...`后退导航(后退上一级省略delta) `...` 1.4.2 编程式导航导航到 tabBar 页面 `wx.switchTab(object)`导航到 非tabBar 页面 ` wx.navigateTo(object)`后退导航 `wx