玩遍jquery

$("#test").html()意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:document.getElementById("test").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错

约定:如果获取的是jQuery对象,那么要在变量前面加上$.

var$variable=jQuery对象

varvariable=DOM对象

基本语法:$(selector).action()

二寻找元素(重要的选择器和筛选器)

2.1选择器

2.1.1基本选择器$("*")$("#id")$(".class")$("element")$(".class,p,div")

2.1.2层级选择器$(".outerdiv")$(".outer>div")$(".outer+div")$(".outer~div")

2.1.3基本筛选器$("li:first")$("li:eq(2)")$("li:even")$("li:gt(1)")

2.1.4属性选择器$(‘[id="div1"]‘)$(‘["alex="sb"][id]‘)

2.1.5表单选择器$("[type=‘text‘]")----->$(":text")注意只适用于input标签

$("input:checked")

2.2筛选器

2.2.1过滤筛选器

$("li").eq(2)$("li").first()$("ulli").hasclass("test")

2.2.2查找筛选器

$("div").children(".test")$("div").find(".test")

$(".test").next()$(".test").nextAll()$(".test").nextUntil()

$("div").prev()$("div").prevAll()$("div").prevUntil()

$(".test").parent()$(".test").parents()$(".test").parentUntil()

$("div").siblings()

实例左侧菜单

3.1属性操作

$("p").text()$("p").html()$(":checkbox").val()

$(".test").attr("alex")$(".test").attr("alex","sb")

$(".test").attr("checked","checked")$(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")

实例编辑框正反选

3.2.1(样式)css("{color:‘red‘,backgroud:‘blue‘}")

3.2.2(位置)offset()position()scrollTop()scrollLeft()

3.2.3(尺寸)height()width()

实例返回顶部

内部插入$("#c1").append("hello")$("p").appendTo("div")

prepend()prependTo()

外部插入before()insertBefore()afterinsertAfter()

replaceWith()remove()empty()clone()

实例clone方法的应用

Title

ViewCode3.4事件

3.4.1

$(document).ready(function(){})----------->$(function(){})

3.4.2

$("p").click(function(){})

$("p").bind("click",function(){})

$("ul").delegate("li","click",function(){})

实例拖动面板

实例隐藏与显示

Title出现隐藏togglehelloworldViewCode实例回调函数

Title

helloworldhelloworldhelloworld

THE END
1.jQuery入门jqueryappandjQuery是一个快速、简洁的 JavaScript 库,它简化了HTML 文档的遍历、事件处理、动画以及 Ajax 交互。它大大简化了 JavaScript 的编写,尤其是在 DOM 操作和事件处理方面。jQuery 是开源的,并且得到了广泛的支持和使用,曾经在现代网页开发中占有非常重要的地位。 https://blog.csdn.net/2201_75999912/article/details/144315605
2.jQuery手风琴折叠菜单所属分类:导航-手风琴菜单 47123330查看评论(4) 查看演示 插件描述:jQuery折叠菜单兼容所有浏览器。 除了界面难看点,别的都还好啦! PREVIOUS: NEXT: jQuery表格单元格合并插件tablesMergeCell.js 简单的下拉选择框 相关插件-手风琴菜单 查看更多 手风琴展开动画效果(感谢上传手风琴效果的朋友) https://www.jq22.com/jquery-info9370
3.一个简单的垂直菜单折叠JavaScriptJquery垂直菜单折叠是一种常见的网页设计元素,用于在有限的空间内展示多个菜单选项。通过折叠菜单,用户可以方便地浏览和选择所需的菜单项,提高用户体验和界面的整洁度。 垂直菜单折叠通常使用JavaScript和jQuery来实现交互效果。JavaScript是一种广泛应用于网页开发的脚本语言,而jQuery是一个基于JavaScript的快速、简洁的JavaScripthttps://cloud.tencent.com/developer/information/%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9E%82%E7%9B%B4%E8%8F%9C%E5%8D%95%E6%8A%98%E5%8F%A0JavaScript%20Jquery-video
4.jQuery实现的简单折叠菜单(折叠面板)效果代码jqueryjs教程http://demo.jb51.net/js/2015/jquery-simple-toggle-zd-menu-codes/ 具体代码如下: jQuery 折叠菜单 by Sam Zhang * { margin:0px; padding:0px; } body { background:transparent url('images/bg.gif') repeat scroll left top;font-size:14px; } ul, li, p, h1https://www.php.cn/faq/4935.html
5.jQueryCSS3圆角水平手风琴折叠菜单切换效果CSS3+jQuery 横向手风琴折叠效果,图片展示 相关标签 jquery特效 图片展示 水平滚动条美化 竖直手风琴 css3手风琴 水平滚动条 css3 圆角 手风琴特效 折叠菜单 圆角表格 css3菜单 滑动手风琴 折叠导航 css3卷边菜单效果 html5卷边菜单效果 jquery菜单 div圆角边框 折叠层效果 折叠 图片手风琴 手风琴插件 水平手风琴 https://www.17sucai.com/pins/3540.html
6.css3和jquery如何实现可折叠导航菜单适合放在手机网页的导航菜单这篇文章主要介绍了css3和jquery如何实现可折叠导航菜单适合放在手机网页的导航菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 效果图如下: 这个实例由css3和依赖于jquery插件。下面是实现代码 https://www.yisu.com/jc/406430.html
7.20个令人恐怖的JavaScript导航技术演示地址:http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/ 9. 鱼眼菜单 鼠标经过的时候,图标会变得大起来。这个技术相当不错。 演示地址:http://marcgrabanski.com/articles/fisheye-javascript-menu 10. 简单的JavaScript折叠式菜单 https://www.51cto.com/article/233998.html
8.jQuery树型菜单插件(Treeview)菜鸟教程jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航,支持基于 cookie 的持久性菜单。 <ulid="browser"class="filetree treeview-famfamfam">Folder 1Item 1.1Item 1.1.1Folder 2Subfolder 2.1<ulid="folder21">File 2.1.1File 2.1.2Subfolder 2.2</https://www.runoob.com/jquery/jquery-plugin-treeview.html
9.menu(菜单)jQueryEasyUI中文文档创建侧菜单通过标签创建侧菜单1 2 使用Javascript创建侧菜单。1 1 2 3 $('#sm').iSidemenu({ data: data });属性 属性名属性值类型描述默认值 width number 侧栏菜单组件的宽度。 200 height number 侧侧栏菜单组件的高度。 auto border booleanhttps://www.jeasyui.cn/document/menu/sidemenu.html
10.jquery实现横向伸缩菜单导航jquery 横向 伸缩菜单导航2020-06-06 上传大小:16KB 所需:28积分/C币 jQuery html5手机导航菜单代码.zip jQuery html5手机导航菜单代码是一款全屏自适应html5手机响应式多级点击伸缩菜单导航代码。 上传者:weixin_39841848时间:2019-07-04 JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个 https://www.iteye.com/resource/weixin_38538381-12502274
11.jQueryCSS3炫酷圆形菜单,动态展开与收缩特效导航采用jQuery与CSS3精心打造,圆形菜单特效导航惊艳登场。动态展开与收缩,流畅自然,为用户带来全新体验。炫酷动画效果,提升网页交互性,让您的网站更加吸睛。https://www.moyublog.com/codes/1689.html
12.各种姿势教你写手风琴式折叠菜单在写后台管理页面的时候,编写折叠菜单是一个比较常见的应用场景。那么今天我们就来学习一下怎么使用各种姿势写出手风琴式的折叠菜单。 写之前先看一下效果,插件来源于jQuery之家,演示效果可以点击这里折叠菜单。jquery之家的源码好像有点问题,下载可以点这里。 https://www.jianshu.com/p/f4e8f04de1cb