分享web开发知识

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

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

web前端(六)——jquery进阶

发布时间:2023-09-06 02:26责任编辑:傅花花关键词:前端

jquery特殊效果

fadeIn() 淡入 ???$btn.click(function(){ ???????$(‘#div1‘).fadeIn(1000,‘swing‘,function(){ ???????????alert(‘done!‘); ???????}); ???});fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素

jquery链式调用

$(‘#div1‘) // id为div1的元素.children(‘ul‘) //该元素下面的ul子元素.slideDown(‘fast‘) //高度从零变到实际高度来显示ul元素.parent() ?//跳到ul的父元素,也就是id为div1的元素.siblings() ?//跳到div1元素平级的所有兄弟元素.children(‘ul‘) //这些兄弟元素中的ul子元素.slideUp(‘fast‘); ?//高度实际高度变换到零来隐藏ul元素

jquery属性操作

// 取出html内容var $htm = $(‘#div1‘).html();// 设置html内容$(‘#div1‘).html(‘<span>添加文字</span>‘);
// 取出图片的地址var $src = $(‘#img1‘).prop(‘src‘);// 设置图片的地址和alt属性$(‘#img1‘).prop({src: "test.jpg", alt: "Test Image" });

jquery循环

$(function(){ ???$(‘.list li‘).each(function(){ ???????$(this).html( $(this).index() ); ???})})......<ul class="list"> ???<li></li> ???<li></li> ???<li></li> ???<li></li> ???<li></li> ???<li></li></ul>

jquery事件

blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入(进入子元素也触发)mouseout() 鼠标离开(离开子元素也触发)mouseenter() 鼠标进入(进入子元素不触发)mouseleave() 鼠标离开(离开子元素不触发)hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成submit() 用户递交表单

正则表达式

正则表达式的写法:

  var re=new RegExp(‘规则‘, ‘可选参数‘);
  var re=/规则/参数;

var sTr01 = ‘123456asdf‘;var re01 = /\d+/;//匹配纯数字字符串var re02 = /^\d+$/;alert(re01.test(sTr01)); //弹出truealert(re02.test(sTr01)); //弹出false

修饰参数:
g: global,全文搜索,默认搜索到第一个结果接停止
i: ingore case,忽略大小写,默认大小写敏感

web前端(六)——jquery进阶

原文地址:https://www.cnblogs.com/sickle/p/10125530.html

知识推荐

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