jQuery笔记

最新推荐文章于 2025-05-17 16:00:22 发布

原创最新推荐文章于 2025-05-17 16:00:22 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

jQuery框架

jQuery是JavaScript框架

jQuery功能：HTML标签选取，标签操作，css操作，事件操作，动画设置，DOM操作，Ajax等。

jQuery是轻量级核心思想“写的少，做的多”

二．jQuery的语法

$:表示jQuery框架的标示符

基本方法：$(选择器或标签对象).方法();

三．jQuery选择器

Id选择器：$(“#id选择器的名字”)

Class选择器：$(“.class名字”);

标签选择器：$(“标签名”);

通配符：$(“*”):选取所有的标签

分组:$(“div,h1”):选取div 和h1

派生:$(“div h2”); 选取div中的h2

选取当前标签：$(this);

$(“p:first”);选取第一个p标签

后代：$(“ul li:first”);选取第一个ul中第一li标签

$(“ul li:first-child”);选取每个ul的第一个li标签

$(“[属性]”):选取带有此属性的标签；$(“[hover]”);选取到a的标签

$(“标签名[属性=’值’]”); 选取此属性=’值’的标签

比如：$(“a[target=’_blank’]”);选取a标签中的target的值是_blank的标签；

$(“div:even”);下标的偶数的位置的div标签

$(“div:odd”):下标的奇数位置的div标签

$(“div:eq(0)”); 选取下标位置为0的位置

预加载

//加载完页面标签之后，再加载jQuery方法
$(document).ready(function () {
//事件绑定，到标签
});
//简写
$(function () {

});

目的：

代码是从下往上执行，防止提前运行jQuery方法，先加载document：DOM文档对象模型，页面中的标签
先加载页面中的标签，在加载或者运行jQuery方法

JavaScript中

Onload事件：<body onload=””></body>

等所有标签和属性等加载完才开始加载：更慢

JS中：window.onload=function(){}; 等标签加载完就加载：更快

注意：jQuery预加载的速度比 onload更早

jQuery预加载，只用加载DOM标签之后，就会执行，

Onload等所有的内容都加载完成，才会执行

常用的jQuery事件

以JavaScript中的事件的on后的动作作为jquery事件的方法名

点击事件：click();

双击 dblclick();

鼠标悬停事件：mouseenter()

鼠标移开事件：Mouseleave();

键盘事件：keydown(),keyup();

表单事件：获取焦点：foucs 失去焦点:blur();表单提交 submit()

值发生改变change()

//hover():模拟悬停的方法
//hover(悬停的方法，离开的方法);
$("#p1").hover(function () {
alert("悬停");
},function () {
alert("离开");
});

2.使用事件的语法

指定绑定的事件的对象：$(选择器)

绑定事件：$(选择器).事件名(function(){

//事件触发的方法

});

Click();

Eg:$(“#id”).click(function(){

$(this).css(“color”,”red”),

});

jQuery效果

隐藏与显现

Hide() 和 show();

Hide(时间，方法执行完后调用的方法)；

Toggle();在隐藏和显示之间切换

淡入淡出（轮播）

实现元素的淡入淡出的四种方法：

Fadeln()淡入以隐藏的元素显现以透明度的方式0到1

fadeOut()淡出以显现的元素隐藏以透明度的方式1到0

fadeToggle() ：切换淡入淡出

fadeTo()：渐变成给定透明度的值（0-1之间）

Fadeln()淡入:已经隐藏的元素

Fadeln(时间，回调函数)；

时间：毫秒，”fast”, ”swing”

$("#d3").fadeTo(3000,0.2,"linear",function () { alert(123);});

fadeTo(时间，透明度值，速度，回调函数); 实际调用animate({opcity:b})方法

滑动

滑动方法:

slideDown():向下滑动显示

slideUp()：向上滑动隐藏

sllideToggle()：滑动切换隐藏与显现。

语法：slideDown():

Animate({属性}，时间，速度，回调函数)；

备注：色彩动画不能设置，包括字体颜色

$("#d1").animate({width:"+=100px",height:"toggle",background:"#999"},1000,"swing");

可使用相对值：比如-=10px; +=10px;

可切换值：height:”toggle”;

Toggle:从0到当前值的切换

//可添加多个animate方法，按照animate顺序执行

jQuery中HTML操作

$(“#id”).html(“内容”); 多个累加：$(“#id”).append(“内容”);

for (var i =1;i<city.length;i++){
bottom_1.append(city[i]);
}

而JavaScript中

用innerHTML