首页
学习
活动
专区
圈层
工具
发布

自写JQ控件-树状菜单控件

真正使用的时候,后台只需要传data到前端,加载到页面就ok了。 这里面依赖了JQuery、XBGMenuTree.css、XBGMenuTree.js。 JQuery文件没什么好说的。...} /* 子子菜单项 */ .st_tree ul ul ul li a{ font-size: 16px; } /* 子菜单项 */ .st_tree ul ul li{ padding-left..._init() End */ /* 设置所有超链接不响应单击事件 */ this.find("a").click(function(){ $(this...主要有这几点: (1)$(function() {}); 当文档载入完毕就执行的意思 (2)jQuery插件开发分为两种: 1、 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax...(3)this关键字:this是Javascript语言的一个关键字。在XBGMenuTree.js有大量使用到,理解其含义,自然可以理解到其精妙之处。

2.4K30

在 jQuery Mobile 中使用 UI 组件

在 jQuery Mobile 中,页眉的默认用法是作为固定在 Web 页面顶部的页面标题;在大部分情况下,页脚是 Web 页面中的最后一个元素,并且包括版权信息、其他超链接等内容。...创建一个拆分按钮列表很简单:在使用 listview data-role 的一个列表项中添加两个彼此相邻的定位点标记(清单 7)。 清单 7....您也可以通过使用图标、缩略图和计数泡泡来创建不同的视觉样式。您可以通过使用 ul-li-count 类,将计数泡泡添加到一个列表项(清单 9)。 清单 9....Album li> ul> ul-li-icon 类限制图片的大小,最大宽度和高度为 40px,它还能够将图片放在列表项中的适当位置。...在这种情况下,您就会有一个长列表,它看起来几乎是无法使用的,而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运,使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。

12K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    1.3 串联 add(expr|ele|html|obj[,con]),把与表达式匹配的元素添加到jQuery对象中 A.add(B) 将A和B拼凑在一起,等效 $(A,B) andSelf(),加入先前所选的加入当前元素中...可以在父元素上检测子元素获取焦点的情况。...可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...该方法的作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery时,那么IE浏览器中 是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动条的宽度和高...a>li> ul> body> 3 效果【了解】 show([speed,[easing],[fn]]),显示隐藏的匹配元素。

    10.2K20

    JQuery从入门到实战

    所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就 是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。...JS里面的功能 // 将 jQuery对象转换为JS对象 let js = jqDiv[0]; alert(js.innerHTML); 2.2、事件的基本使用 常用的事件 在 jQuery 中将事件封装成了对应的方法...jQuery 对象[索引] jQuery 对象.get(索引):将 jQuery 对象转为 JS 对象。 事件 在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。..." value="将雄起添加到上海上方">     ul id="city"> li id="bj">北京li> li id...="sh">上海li> li id="gz">广州li> li id="sz">深圳li> ul> ul id="desc">

    16.2K30

    WEB入门之十六 操作DOM节点

    节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。...>ul>li>Javali>li>C#li>li>PHPli>li>C++li>ul>body>$("ul").wrapInner(""); 上述代码使用wrapInner函数包裹ul中的所有li子元素 7.1.6 复制节点 clone函数用来复制节点,下面是该函数的一个示例。...jQuery针对节点操作提供了很多函数供开发人员使用,这些函数很多比较相似,大家在使用的时候要注意区分。...添加节点时,需要先单击选中某个一级或二级节点,然后在文本框中填写新添加的节点名,单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。

    1.4K10

    WEB入门之十六 操作DOM节点

    节点是DOM中最基本的组成单位,每个标签、每个文本都可以看成是一个节点。本章将学习使用jQuery对DOM节点进行操作。 ​...> ul> li>Javali> li>C#li> li>PHPli> li>C++li> ul> body> $("ul").wrapInner...(""); 上述代码使用wrapInner函数包裹ul中的所有li子元素 7.1.6 复制节点 clone函数用来复制节点,下面是该函数的一个示例...jQuery针对节点操作提供了很多函数供开发人员使用,这些函数很多比较相似,大家在使用的时候要注意区分。 ​...添加节点时,需要先单击选中某个一级或二级节点,然后在文本框中填写新添加的节点名,单击【添加】按钮把节点名作为新节点添加到选中的节点下面。删除节点只实现删除三级节点即可。

    1.2K10

    CSS选择器

    |先应用第二个的元素,且在第一个元素中| 子代选择器 | >|ul>li|匹配第二个选择器,属于第一个选择器的子代| 兄弟选择器 |+ |p+a{}|匹配紧跟第一个选择器的选择器...:not选择器 如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式, 可以使用:not选择器。 如: body *:not(h3)。...:target选择器 :target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。...只有用户单击了页面中的超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用。 链接伪类 链接伪类 在CSS中,通过链接伪类可以实现不同的链接状态。...所谓伪类并不是真正意义上的类,他的名称是由系统定义的,通常由标记名、类名或id名加“:"构成。超链接标记的伪类有4种,具体如下表所示。

    3.2K11

    (二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式

    CSS伪类 伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。...:hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。...:not和:target(CSS3新增的两个特殊的伪类选择器) UI伪类 UI元素状态伪类选择器有如下几个: 属性 说明 Selector:link 匹配Selector选择器且未被访问前的元素(通常只能是超链接...>Andriodli> ul> ul> li>MATHli> ul> body> css li:first-child{ color:yellow... body> CSS /* CSS Document */ /*将段落中的第一个字母放大到原来的300%*/ p::first-letter { font-size: 300%; } /*

    17910

    针对CSS说一说|技术点评

    , .da { color: blue; } 伪类: :active,将样式添加到被激活的元素中 :focus,将样式添加到被选中的元素中 :hover,当光标悬浮在页面对象上方时,向页面对象添加样式...:link,将样式添加到未被访问过的链接中 :visited,将样式添加到被访问过的链接中 :first-child,将特殊的样式添加到页面对象的第一个子元素中 :lang,允许设计者定义指定的页面中所使用的语言...CSS3新特性 有在属性选择符中引入通配符,灵活的伪类选择符nth-child()等。 属性选择符 E[attr],选择具有attr属性的E元素。...E E:nth-of-type(n),匹配同类型中的第N个同级兄弟元素E E:nth-last-of-type(n),匹配同类型中的倒数第n个同级兄弟元素E CSS结构伪类选择符 E:link,设置超链接...a在未被访问前的样式 E:visited,设置超链接a在其链接地址已被访问过时的样式 E:hover,设置元素在光标悬停时的样式 E:active,设置元素在被用户激活时的样式 E:foucs,设置元素在成为输入焦点时的样式

    1.7K20

    Ajax 学习总结

    Ajax 技术在 JavaWeb 应用中随处可见,比如购物车中根据商品数量及时更新等应用,那么我们今天就来说说 Ajax 的一些小应用!   ...> 52 ul> 53 54 body> 55     各超链接所对应的页面(SSPage.jsp、yy.html、YYSSPage.html...XML 是一种通用的传输格式,不必把数据强加到已经定义好的格式中,而为数据自定义合适的标记,且利用 DOM 可以完全掌握文档       3....当远程程序未知时 XML 文档是首选 三、案例再实现(使用 JQuery 实现)   案例效果如上,只是实现方式为 JQuery   3.1 JQuery 中 Ajax 的 API     1. load...(url) -- -- 任何 HTML 节点都可以使用 load 方法加载 Ajax,它可以载入远程的 HTML 代码并插入 HTML 中,若需要使用部分内容则可以使用选择器(在定义 URL 的时候使用选择器

    1.9K70

    JQuery高级

    jQuery中定义变量的时候,一般命名用$开头。同事一看就知道是使用了jQuery,然后使用jQuery的语法。 其实$是jQuery中的一个函数。...比如子级有单击事件,那么父级如果有单击事件也会被触发,父级的父级如果有单击事件也会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...最终是通过js内置的结构化表现手法,将网页中的所有html节点查找到,然后实现一个倒置的树状结构图,这个树状结构图就叫DOM树。...标签===标记====元素 的内容、标签的属性) 网页文档的根:html标签 html的子标签是head和body 纯前端会学很多东西,后端不需要了解全部,知道其中的原理即可。...新增节点------- 步骤: 1、声明变量保存节点数据(名字一般为$开头,然后找的标签是什么就叫做什么) 2、使用追加函数将节点变量追加到指定位置 子级加: append(添加的内容) 向末尾加 appendTo

    2K50

    常用的CSS3选择器

    :target选择器 :target选择器用于为页面中的某个target元素(该元素的id被当做页面中的超链接来使用)指定样式。...只有用户单击了页面中的超链接,并且跳转到target元素后,:target选择器所设置的样式才会起作用。...> li>海贼王li> ul> ul> li>斗罗大陆li> li>武庚纪li> li>斗破苍穹li> ul> body> <...:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容,使用方法与:before选择器相同。 五、链接伪类 1.链接伪类 在CSS中,通过链接伪类可以实现不同的链接状态。...所谓伪类并不是真正意义上的类,他的名称是由系统定义的,通常由标记名、类名或id名加“:”构成。超链接标记的伪类有4种,具体如下表所示。

    4.7K20

    Jquery入门基础教程免费版

    .first() .last() .eq(0) 3.2 基本选择器 1.id选择器 $("#id名") 2.类选择器 $(".类选择器名")来访问相应的使用类样式的元素 3...." ) 匹配“家乡”中的“北京”选项;#userform是表单名,不是下拉框 2.6 属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html...Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...4.2 追加节点 语法 功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素B前置插入到...li>") //加到了ul的子元素li列表的后面; //$(".gameList").prepend("li>雨鑫战神li>") //before after

    2.2K10
    领券