jquery入门

1.语法格式$(selector).action()

selector:要操作的元素 eg:this,#identifer(根据ID取元素),.class(根据类取元素)

action:对元素操作如hide,show之类

$(this).hide() 

2.入口函数:

jquery:

$(document).ready(function(){

  // 开始写 jQuery 代码... 

//文档加载完成之后再执行,避免还没加载完成找不到元素

});

注意和JavaScript 的 window.onload 事件不同的是JavaScript等到所有内容,包括外部图片之类的文件加载完后,才会执行而ready是在

文档的html元素加载完成后就开始执行

3.选择器:

元素选择器:$("p").action() 选择所有p元素

id选择器:$("#identifer") 选择id为identifer的元素

类选择器:$("box") 选择class为box的元素

4.常用事件:

$("div").click(function(){ 

console.log('点击了div盒子');

});

$("div").dblclick(function(){ 

console.log('双击了div盒子');

});

$("div").mouseenter(function(){

console.log('鼠标滑过了div盒子');

});

$("div").mouseleave(function(){

console.log('鼠标离开了div盒子');

});

$("div").mousedown(function(){

console.log('鼠标按下div盒子未离开');

});

$("div").mouseup(function(){

console.log('鼠标按下div盒子离开了');

});

$("div").hover( function(){ console.log ("你进入了div 盒子");

    },

    function(){        console.log("你离开了div盒子!");

    });

$("div").focus(function(){

console.log('聚焦在div盒子');

});

$("div").blur(function(){

console.log('焦点离开div盒子');

});

5.动作

$("div").hide();//隐藏

$("div").show();//显示

$("div").toggle(); //用来切换hide和show

$("div").fadeIn(); //淡入

$("div").fadeOut();//淡出

$("div").fadeToggle();//用来切换fadeIn和fadeOut

$("#div1").fadeTo("slow",0.15); //淡入淡出添加透明度

$("#div").slideDown() //滑下

$("#div").slideUp()//滑上

$("#div").slideToggle() //滑下滑上切换

$("button").click(function(){ $("div").animate({

    height:'150px', //动画

    width:'150px'  });});

$("button").stop(); //停止动画

jQuery 方法链接

允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条

例如:$("div").css("color","red").slideUp(2000).slideDown(2000);

6.dom属性操作

$("#identfier").text();设置或返回所选元素的文本内容

$("#identfier").html();设置或返回所选元素的内容(包括 HTML 标记)

$("#identfier").val();设置或返回表单字段的值

$("#identfier").attr("href");获取属性

$("#identfier").text("Hello world!"); //设置元素属性的值

$("#identfier").val("Hello"); 

$("#identfier").attr("href","http://baidu/com");

$("p").append("追加文本");

$("p").prepend("在开头追加文本");

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

$("#div1").remove();删除被选元素及其子元素。

$("#div1").empty();删除被选元素的子元素。

$("p").remove(".italic");

$("h1,h2,p").addClass("blue"); 添加class

$("h1,h2,p").removeClass("blue"); 移除class

$("h1,h2,p").toggleClass("blue"); 添加和移除切换

$("p").css("background-color","yellow");设置 CSS 属性

$("p").css({"background-color":"yellow","font-size":"200%"});设置多个 CSS 属性

$("#div1").width(); 方法设置或返回元素的宽度(不包括内边距、边框或外边距)

$("#div1").height();设置或返回元素的高度(不包括内边距、边框或外边距)

$("#div1").innerWidth(); 方法返回元素的宽度(包括内边距)

$("#div1").innerHeight();innerHeight() 方法返回元素的高度(包括内边距)

$("#div1").outerWidth();返回元素的宽度(包括内边距和边框)

$("#div1").outerHeight();返回元素的高度(包括内边距和边框)

7.dom元素操作

$("span").parent();方法返回被选元素的直接父元素

$("span").parents(); 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)

$("span").parentsUntil("div");方法返回介于两个给定元素之间的所有祖先元素

$("div").find("span"); 方法返回被选元素的后代元素,一路向下直到最后一个后代

$("h2").siblings(); 方法返回被选元素的所有同胞元素

$("h2").next(); 方法返回被选元素的下一个同胞元素

$("h2").nextAll();方法返回被选元素的所有跟随的同胞元素

$("h2").nextUntil("h6"); 方法返回介于两个给定参数之间的所有跟随的同胞元素

$("div p").first(); 方法返回被选元素的首个元素

$("div p").last();方法返回被选元素的最后一个元素

$("p").eq(1);方法返回被选元素中带有指定索引号的元素

$("p").filter(".url");方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回

$("p").not(".url");方法返回不匹配标准的所有元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容

  • 1. jQuery是一个JavaScript库 提供强大的选择器、简洁的API、优雅的链式、便捷的操作,核心理念 ...
    刘刀文阅读 418评论 0 3
  • 零) js / ajax / json / jQuery js: 基于对象, 解释型, 事件驱动, 浏览器交互执行...
    奋斗的老王阅读 742评论 0 50
  • 前言: 上次说到了JavaScript,对其有一定了解,本文就来说说jQuery。jQuery就是一个由JavaS...
    贪挽懒月阅读 1,113评论 0 7
  • 一、选择网页元素 jQuery的基本设计思想和主要用法,就是“选择某个网页元素,然后对其进行某种操作”使用JQue...
    qqqc阅读 282评论 0 1
  • 新年未到,小年先行,春天的风柔柔吹进心底,荡起祝福的涟漪;春天的阳光暖暖照射大地,洒出幸福甜蜜。小年到,创业就上精...
    乐活随创阅读 196评论 0 0