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");方法返回不匹配标准的所有元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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