JQuery——纵览小结

朴灿烈づ我的快乐病毒、 2022-06-02 12:21 193阅读 0赞

**套路**——【先用HTML中的标签来定义页面内容；然后用CSS调整表格样式；最后用JQuery设计页面行为，在JQuery中先找到要做相应处理的DOM节点，触发节点的事件，触发过程中的可以用CSS方法在JQuery中修改节点属性。】

下面就简单说一下每个例子！

1、用户名校验

①HTML使用的标签：

<input>、<div></div>

②JQuery使用的方法：

◆val()方法：获得节点的value属性值

◆html()方法：设定某个节点中的HTML内容

◆removeClass()方法:移除元素的class定义

◆addClass()方法:添加元素的class定义

2、可编辑**表格**

①HTML使用的标签：

<table></table>、<tr></tr>、<th></th>、<td></td>

②JQuery使用的方法：

◆click()方法：响应鼠标点击事件

◆keyup()方法：响应键盘弹起事件

◆trigger()方法：触发被选元素的指定事件类型

◆appendTo()方法：将一个节点追加到另一个节点所有子节点的后面

3、**菜单**效果

①HTML使用的标签：

<ul></ul>、<li></li>

②JQuery使用的方法：

◆indexOf()方法:可返回某个指定的字符串值在字符串中首次出现的位置。

◆slideToggle()方法:通过使用滑动效果（高度变化）来切换元素的可见状态。

4、**标签**页效果

①HTML使用的标签：

<ul></ul>、<li></li>、<div></div>

②JQuery使用的事件方法：

◆mouseover()事件:鼠标进入事件，即当鼠标指针位于元素上方时，发生此事件

◆mouseout()事件:鼠标离开事件，即当鼠标指针从元素是移开时，发生此事件

5、**级联下拉框**

①HTML使用的标签：

<div></div>、<span></span>、<select></select>、<option></option>

②JQuery使用的方法：

◆children()方法:返回被选元素的所有直接子元素

◆parent()方法:获得当前匹配元素集合中每个元素的父元素

◆next()方法：获得一个节点的下一个兄弟节点

◆attr()方法:设置或获取某一个及节点的属性值

◆animate()方法：实现任意的动画效果，可以控制某个CSS属性在某个时间内进行变化，达到动画的效果

◆data()方法：用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷

6、**窗口**效果

①HTML使用的标签：

<div></div>

**注**：此实例的窗口效果就是通过div标签以及CSS代码呈现出来的，窗口的标题栏和内容区域分别是一个div标签

②JQuery使用的事件、方法、函数：

◆show()方法:显示

◆hide()方法:隐藏

◆slideUp()方法:通过使用滑动效果，隐藏备选元素，如果已经显示出来的话

◆fadeOut()方法:使用淡出效果来隐藏被选元素，假如该元素是隐藏的

◆dequeue()方法:终止一个自定义的队列函数

◆is()方法:判断一个对象是否满足is方法参数中的JQuery选择器

◆scroll事件:当用户滚动指定的元素时，发生此事件

◆resize事件：当调整浏览器窗口的大小时，发生此事件

◆setTimeout函数：用来指定某个函数或某段代码，在多少毫秒之后执行。即延迟执行某些代码，对应的可用clearTimeout清除设定的延迟操作

发表评论取消回复

表情：

评论列表（有 0 条评论，193人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery用法小结

filtering过滤： .not('') 在所选元素集合中，排除特定的元素 $( "li" ).not( ":even" ).css( "background-color

悠悠/ 2023年08月17日 16:20/ 0 赞/ 142 阅读

相关 jQuery 使用小结

1.获取对应值 var username = $("username").val(); 2.添加下拉框元素 //初始化"校区"下拉框 fo

矫情吗；*/ 2022年11月13日 11:23/ 0 赞/ 187 阅读

相关 JQuery Method小结

$('input').keyup(handler): 注册keyup监听事件; $('element').val(): 选取element html的值。 $('elem

小鱼儿/ 2022年09月30日 14:52/ 0 赞/ 169 阅读

相关 JQuery——纵览小结

套路——【先用HTML中的标签来定义页面内容；然后用CSS调整表格样式；最后用JQuery设计页面行为，在JQuery中先找到要做相应处理的DOM节点，触发节点的事

朴灿烈づ我的快乐病毒、/ 2022年06月02日 12:21/ 0 赞/ 194 阅读

相关 J2SE——纵览小结

一、概图首先先附张概括的思维导图，嘿嘿还有很多有待改善的地方，虽然乍眼一看有点生态圈的感觉，实在找不出其他联系了才把他们围成了一个圈似的东西，谁有更好的想法欢迎交流哦

小灰灰/ 2022年05月29日 23:43/ 0 赞/ 180 阅读

相关 JQuery小结

目录 JQuery 栗子壹栗子贰【JQuery】——点击下拉；滑动下拉菜单【JavaScript】——滑动下拉 JQuery 和DOM之间的关系更加灵活：

蔚落/ 2022年04月25日 08:52/ 0 赞/ 274 阅读

相关 Jquery操作select小结

每次操作select都要查资料，干脆总结一下。为select设置placeholder <select class="form-control selOP" pl

秒速五厘米/ 2022年01月11日 23:09/ 0 赞/ 371 阅读

相关 nosql数据库纵览

引用：[http://cloud.csdn.net/a/20110610/299526.html][http_cloud.csdn.net_a_20110610_299526.

川长思鸟来/ 2021年11月10日 06:34/ 0 赞/ 340 阅读

相关事件抽取纵览

![图片][9053d0a411a2bbc8d72ffd71f31d49ac.png] paper：https://arxiv.org/abs/2107.02126.pdf

谁践踏了优雅/ 2021年09月25日 12:06/ 0 赞/ 500 阅读

相关 Jquery操作select小结

每次操作select都要查资料，干脆总结一下。为select设置placeholder <select class="form-control selOP" pl

超、凢脫俗/ 2021年09月17日 14:52/ 0 赞/ 400 阅读