分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

04_jQuery_基础过滤

发布时间:2023-09-06 01:24责任编辑:傅花花关键词:jQuery

HTML代码:

 ???<input type="button" id="run" value="run"/> ???<div></div> ???<div id="mover"></div> ???<div></div> ???

jQuery代码:

$(function(){ ???//文档加载完成之后 ???????????$("#run").click(function(){ ???????//按钮的点击事件 ???????????????$("div:animated").toggleClass("colored");//$("div:animated")找到正在执行动画的div,toggleClass()对设置或者移除的被选元素的一个或多个类进行切换 ???????????}); ???????????function animatedIt(){ ???????????????$("#mover").slideToggle("slow",animatedIt);//slideToggle通过滑动来切换元素的可见状态,slideToggle("slow(600毫秒的时间)",animatedIt) ???????????} ???????????animatedIt();//调用函数 ???????});

css代码:

div{ ???????width:100px; ???????height:100px; ???????background-color:yellow; ???????float:left; ???????border:solid 1px #aaaaaa; ???????margin:0 5px; ???} ???.colored{ ???????background-color:green; ???}

效果:中间的方块实现了滑动的动画效果,点击按钮可以切换中间方块的颜色

HTML代码:

<div id="content"> ???????<input type="text" tabindex="1">
      <!--tabindex控制tab键控制次序,(当tab用于导航时)--><input type="text" tabindex="2"> ???????<select tabindex="3"> ???????????<option>select0 menu</option> ???????????<option>select1 menu</option> ???????????<option>select2 menu</option> ???????</select> ???????<div tabindex="4"> ????????????a div ???????</div> ???</div>

jQuery代码:

$(function(){ ???????$("#content").delegate("*","focus blur",function(event){//delegate("所有元素","事件是获得焦点",)给指定的元素添加一个或者多个事件 ???????????var e=$(this);//存储当前指向的对象 ???????????setTimeout(function(){ ???????????????e.toggleClass("focused",e.is(":focus"));//e.is(":focus")获取焦点的时候 ???????????},0); ???????}) ???});

CSS代码:

.focused{ ???????background-color:#abcdef; ???}

效果:点击各个元素,变成微蓝色

HTML代码:

  <table border="1"><!--border="1"表格边框的宽度--> ???????<tr> ???????????<td>#9</td> ???????????<td>#8</td> ???????????<td>#7</td> ???????</tr> ???????<tr> ???????????<td>#6</td> ???????????<td>#5</td> ???????????<td>#4</td> ???????</tr> ???????<tr> ???????????<td>#3</td> ???????????<td>#2</td> ???????????<td>#1</td> ???????</tr> ???</table>

jQuery代码:

$(function(){ ???????????????$("td:lt(4)").css("color","red"); ???????????})

效果:将索引小于4的文本颜色变红

04_jQuery_基础过滤

原文地址:http://www.cnblogs.com/xiaojiujiu1999/p/7815312.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved