Javascript和Jquery笔记

前端核心技术精要

最新推荐文章于 2025-09-10 16:16:57 发布

weixin_30478619

最新推荐文章于 2025-09-10 16:16:57 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ibelivetheresaherohere/p/8425700.html

本文深入讲解了前端开发的核心技术，包括JavaScript的基本语法如变量、函数、对象等，并介绍了DOM操作及常见方法。此外，还详细解析了jQuery库中常用的效果方法如隐藏/显示、淡入/淡出、滑动等动画效果，以及链式调用和HTML/CSS属性的修改技巧。

javascript:
--变量
--函数
--对象
--if...else...
-- switch
-- for
-- while
--DOM CSS
document.getElementById("p1").style.color="#123123";
--DOM HTML
[].innerHTML="<p>12312</p>";
[].attribute="";
[].src="";
-- JS window
.document
.screen
.location
.history
.navigator
.popupAlert
.timing
.cookies

--带确认框的：if(confirm(txt)){ document.location.href="www.baidu.com";}
--代码出错事件：onerror=hw; function hw(msg,url,l){.......}
--cookie处理：document.cookie="name=Tom;"; [字符串处理]
--计时器：t=setTimeout(callback,ms);clearTimeout(t);
例：callback递归 f(){setTimeout(function(){f()},1000);}
--图标：× ×图标 ☰ 三图标

JQuery
--效果
隐藏/显示：hide()/show()--hide(1000) == toggle(speed,callback)切换
淡入/淡出：fadeIn()/fadeOut() == fadeToggle(speed,callback)切换
滑动：slideDown()/slideUp == slideToggle(speed,callback)切换
动画：animate({params},speed,callback) 队列执行
例：$("div").animate({color:"red",opacity:"0.8"},500);
$("div").animate({color:"blue",opacity:"0.6"},500);
停止:stop()
--链式代码：$("#p1").css("color","red").toggle(500);
--HTML
text() + html() + val() + attr()
例：$("#a1").attr({"href":"....","value":"连接1"});

添加元素：append()结尾添加，prepend()开头添加
before()元素前添加，after()元素后添加

删除: remove()删除被选元素，empty()删除其子元素
例:$("p").remove(".p1");删除class=".p1"的所有<p>元素
CSS：addClass(),removeClass(),toggleClass(),css()
尺寸：width()/height()，innerWidth()/innerHeight()，outerWidth/outerHeight()
遍历：parent()/parents()/parentsUntil()--父，子--children()/find()，同袍siblings()，next()/first()/last()
AJAX:
.load(url,data,callback) => 从服务器加载资源
.get(url,callback) => 请求服务器数据
.post(url,data,callback) => 有参数请求服务器数据
.ajax()

转载于:https://www.cnblogs.com/ibelivetheresaherohere/p/8425700.html