大家好，又见面了，我是你们的朋友全栈君。 html中偶尔会使用到列表，记录一下。 1 9 10 11 12 列表使用test: 13 ul...class = "level_1"> 14 li> 15 亚洲 16 ul class = "level_2"> 17 li>中国li> 18 li>日本li> 19 ul> 20...li> 21 li> 22 欧洲 23 ul class = "level_2"> 24 li>德国li> 25 li>意大利li> 26 ul> 27 li> 28 ul> 29 30 1.
1.jQuery简介及使用 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。...(write less,do more.) jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM...我用的是jQuery1.12.4版本 uncompressed：未压缩版本，适用于开发环境，方便查看源代码 minified：压缩版本，适用于生产环境 jQueryapi文档 官方api文档：英文版本...，如果你使用的技术是最新的技术，用到了新的特性，此时就需要从官方文档中查看新特性的使用方式。...在线中文API手册 / 在线中文API手册：可以通过在线API中文手册，查看jquery中函数的使用方式 离线API中文手册：点击链接自行下载，开发过程中我们的必备手册！
jQuery 插件：Superfish 菜单插件简介Superfish 是一个基于 jQuery 的强大、灵活、易于使用的多级下拉菜单插件，常用于网页开发中创建响应式、富有互动性的导航菜单。...引入必要的文件要使用 Superfish 插件，首先需要引入 jQuery 和 Superfish 的相关 CSS 和 JavaScript 文件。 li> ul>php388 Bytes© 菜鸟-创作你的创作ul class="sf-menu"> 是 Superfish 插件所要求的菜单容器类，插件会自动识别此类来初始化菜单....sf-menu li.sfHover > ul { display: block; opacity: 1; height: auto;}php578 Bytes© 菜鸟-创作你的创作总结Superfish...它支持鼠标悬停显示/隐藏菜单、动画效果、响应式设计等功能，广泛应用于导航栏和菜单设计中。通过简单的配置和初始化，可以为网站添加丰富的菜单交互效果，提升用户体验。
一、show()方法和hide()方法 这两种方法是jQuery动画的最基本方法。...四、自定义动画方法animate() 在很多情况下，上面的三种方法无法满足用户的各种需求，那么久需要对元素有更多的控制，在jQuery中可以使用animate()方法来自定义动画；其语法结构： animate...PS：callback回调函数适用于jQuery所有的动画效果方法。...八、其他动画方法 除了上面的提到的方法以外，jQuery中还有4个专门用于交互的动画方法。...另外，在动画方法中要考虑其他非动画方法会会插队，例如css()方法，要使非动画方法也按照顺序执行，需要把这些方法写在动画方法的回调函数中或者queue()方法中。
在HTML中，有序列表(ol)和无序列表(ul)元素通常会默认有一定的内边距(padding)和外边距(margin)，这是由浏览器默认样式表所定义的。...这些内边距和外边距可能导致列表向左偏移，从而出现左边超出的情况。...具体来说，ol和ul元素的默认样式表通常会定义： padding-left：列表项左侧的内边距，默认为 40px（不同浏览器可能略有不同）。...margin-left：列表元素左侧的外边距，默认为 0。 因此，当你在HTML中使用ol或ul元素时，它们的左边可能会默认超出。...解决 /* 去掉有序列表和无序列表的默认样式 */ ol, ul { margin: 0; padding: 0; list-style-type: none; } /* 为有序列表添加数字编号
公众号：「浅羽的IT小屋」 1、了解jQuery 「背景：」 Query查询的意思，jQuery就是用javascript更方便的查询和控制页面组件 「宗旨：」 设计宗旨：Write Less，Do...More，即提倡写更少的代码，做更多的事 「简介：」 jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互...4.与Ajax技术的完美结合 5.大量插件在页面中的运用 3、搭建jQuery开发环境 「流程：」 准备两份文件如下： ?.../a> (1110) li> li> PHP (230) li> li> jQuery对象是一个数组对象 结语 本篇关于jQuery的的介绍就先到这里结束了，后续会出jQuery动画、Ajax、jQuery操作
常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript...j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。...jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery本质： 就是学习调用这些函数（方法）。...相当于原生 js 中的 DOMContentLoaded。 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。...是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用包装成jQuery对象，就可以调用jQuery 的方法。 1.2.5.
jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍 1.1.1 JavaScript 库 JavaScript库：即 library...j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。...相当于原生 js 中的 DOMContentLoaded。 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。...是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用包装成jQuery对象，就可以调用jQuery 的方法。...总结: 每次使用动画之前，先调用 stop() ,在调用动画。 1.5.6. 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。
1 jQuery快速入门 1.1 什么是jQuery 它是一个开源的JavaScript类库 。...选择器("input")与 2.3 元素遍历 在操作HTML文档中的DOM元素时，经常需要进行元素遍历。...ul> li>PHPli>li>iOSli> li>Javali>li>UIli> ul> jquery-1.12.4.min.js... ul>li>Springli>li>summerli>ul> ul>li>autumnli>li>winterli>ul> 中的所有DOM结构绘制完成后就执行（可能关联内容并未加载完成） 编写个数 不能同时编写多个 能够同时编写多个 简化写法 无 $() jQuery中的ready与JavaScript
元素 在线实例 $(“p:first”) 选取第一个 元素 在线实例 $(“ul li:first”) 选取第一个 ul> 元素的第一个 li> 元素 在线实例 $(“ul li:first-child...~ p”) 元素同级的所有 元素 :eq(index) $(“ul li:eq(3)”) 列表中的第四个元素（index 值从 0 开始） :gt(no) $(“ul li:gt...li $("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li :animated 选择动画进行中的所有元素。...ul> 元素是 li> 元素的父元素，同时是 的子元素 左边的 li> 元素是 的父元素，ul> 的子元素，同时是 的后代。...XML文档 $.trim() 去除字符串两端的空白字符 $.type() 确定JavaScript内置对象的类型 $.unique() 在jQuery 3.0中被弃用。
学习jQuery的时候，很快过了一遍，发现好多知识点不清晰。看来还是要写出来加深印象，平时多练习！ jQuery是一个Javascript函数库，轻量级，“写得少，做的多！”...隐藏所有id=test的元素 $('#test').hide(); 2.文档就绪事件： $(document).ready(function(){ //开始书写jQuery代码 })； 这是为了防止文档在加载完成前执行...") $("*")：选择所有元素 $(this)：选取当前html元素 $("p.test")：选取class为test的元素 $("p:first")：选取第一个元素 $("ul li:first...")：选取第一个ul>元素中的第一个li>元素 $("ul li:first-child")：选取每个ul>元素下的第一个li>元素 $("[href]")：选取所有带有href的元素 $("a...属性设置无效，因为色彩动画不包括在核心jQuery库中。
1.jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。...('ul') //这些兄弟元素中的ul子元素 .slideUp('fast'); //高度实际高度变换到零来隐藏ul元素 例子：层级菜单 <!...Code 回到顶部 8.jquery动画 通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。...插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。...json的另外一个数据格式是数组，和javascript中的数组字面量相同。
fn:在动画完成时执行的函数，每个元素执行一次。...params:一组包含作为动画属性和终值的样式属性和及其值的集合 speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing...:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing". fn:在动画完成时执行的函数，每个元素执行一次。...停止动画： stop([clearQueue],[jumpToEnd])//停止所有在指定元素上正在运行的动画。 clearQueue:如果设置成true，则清空队列。可以立即结束动画。...gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
jquery 使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。...jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。 //1.$是什么?...//$(dom对象); jq对象和dom对象(重要) DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...【查看jQuery文档】 jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。 所以我们平时真正能用到的只是少数的最常用的选择器。...当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中， 等前面的动画完成后再开始执行。
ul> // jQuery $("li").has("ul").css("background-color", "red"); 2.查找 查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的...li> ul> li>22222li> 添加新的li // jQuery $("ul>li").click...="btn1">添加新的li 删除ul上的事件委托的监听器 // jQuery // 设置事件委托 $("ul").delegate...("ul").append("li>新增的li.......li>"); }); // 移除事件委托 $("#btn2").click(function () { $("ul").undelegate("click"); }); 十、JQuery 动画
动画(animation)，ajax，DOM，更简单，容易使用的api。...jquery api 文档 开发环境，测试环境，生产环境 git svn $(function(){ // 写jquery入口函数的第二种方法 }); jq对象和Dom对象 ul> li>...选择器是jquery提供的一组方法，用来方便我们找页面中的元素，jquery选择器返回的是jquery对象。...> li> javascript:void(0);">一级菜单 ul class="ul"> li>javascript:void...，到最上慢，下来就变快了，而linear是线性匀速的效果动画。
参考文档 JQuery 实现自动生成二级目录 JQuery 点击事件回到页面顶部效果 配置步骤 content 内容的标题要固定某个号，如：h2 设置 content 内容 div 的 id 属性，如：...id="yzq-blog-content" 实现的 js 代码 只生成一级目录，指定 h2（效果）： javascript" type="text/javascript...h2").click(function (event) { if (event.target === this) { // 点击 h2 标题，回到顶部，时间是回去的动画时长...); if (jquery_h4_list.length > 0) { li_content += 'ul style="list-style-type...> 0) { li_content += 'ul>'; } li_content += '<
//4. jQuery提供了一系列动画相关的函数，使用非常方便。 //5. 代码简单、粗暴。 没有对比，就没有伤害，有了对比，处处戳中要害。 什么是jQuery?...DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...$(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 跟CSS的选择器一模一样。...名称 用法 描述 children(selector) $(“ul”).children(“li”) 获取当前元素的所有子元素中的li元素 find(selector) $(“ul”).find(“li...区分jQuery与Javascript JavaScript是一门编程语言，jQuery仅仅是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。
为什么要学jquery 使用javascript开发过程中，有许多的缺点： 查找元素的方法单一，麻烦。 遍历数组很麻烦，通常要嵌套一大堆的for循环。 有兼容性问题。...jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。...jq对象和dom对象(重要) DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。...li元素中，选择索引号为偶数的元素 总结：这类选择器都带冒号 筛选选择器(方法) 名称 用法 描述 children(selector) $(“ul”).children(“li”) 相当于$(...$(selector).position(); jQuery事件机制 JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。
云服务器
ICP备案
云直播
实时音视频
即时通信 IM
