JQuery基础

  JQuery

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

实例:

使用前需要导入

本地导入

 <script src="jquery-1.10.2.min.js">

src 是本地jQuery的路径

</script>

CDN(内容分发网络)

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

Src 是网络jQuery路径地址

</script>

 

基础语法: $(selector).action()

           $ 符号定义 jQuery

           (selector选择要查找或查询的HTML的元素

           jQuery的action() 对元素进行的操作

实例:

$(“this”).hide()-隐藏当前元素

$(“p”).hide()-隐藏所有的p元素

$(“p.test”).hide()-隐藏所有 class=“test”的p元素

$(“#test”).hide()-隐藏所有的id=“test”的元素

 

为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数,操作可能失败。

文档就绪事件

   $(“document”).ready(function(){

      //jquery代码

});

Jquery选择器

    元素选择器  $(“p”)  选取所有p元素

    #Id选择器    $(“#id”)  选取id是id的元素

    .Class选择器  $(“.class”) 选取class是class的元素

 

$("*")

选取所有元素

$(this)

选取当前 HTML 元素

$("p.intro")

选取 class 为 intro 的 <p> 元素

$("p:first")

选取第一个 <p> 元素

$("ul li:first")

选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")

选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")

选取带有 href 属性的元素

$("a[target='_blank']")

选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']")

选取所有 target 属性值不等于 "_blank" 的 <a> 元素

$(":button")

选取所有 type="button" 的 <input> 元素 和 <button> 元素

$("tr:even")

选取偶数位置的 <tr> 元素

$("tr:odd")

选取奇数位置的 <tr> 元素

 

 

 

独立文件中使用 jQuery 函数

<script src="my_jquery_functions.js">

 引用以.js结尾的文件

</script>

 

 

jQuery 事件

 

什么是事件 即页面对不同的访问者的响应叫做事件,事件处理程序指的是当HTML中发生某些事件所调用的方法

 

  实例 在某元素上移动鼠标  选取单选按钮 点击元素

 

 

事件方法语法  

$(“p”).click(function(){

     //单击动作触发后执行的代码!!  匿名内部方法

});

$(“p”).dbclick(function(){

     //双击动作触发后执行的代码!!  匿名内部方法

});

 

$(“p”).mouseenter(function(){

     //移入动作触发后执行的代码!!  匿名内部方法

});

$(“p”).mouseleave(function(){

     //移出动作触发后执行的代码!!  匿名内部方法

});

 

$(“p”).mousedown(function(){

     //移入单击动作触发后执行的代码!!  匿名内部方法

});

$(“p”).mouseup(function(){

     //移入单击松开动作触发后执行的代码!!  匿名内部方法

});

$(“p”).hover(

function(){

     //鼠标移入元素事件

},

function(){

//鼠标移出事件

}

);

 

$(“p”).focus(function(){

     //元素获得焦点后 触发执行的代码!!

});

$(“p”).blur(function(){

     //元素失去焦点后 触发执行的代码!!  

});

 

$("#hide").click(function(){

$("p").hide(/*slow fast 毫秒数*/); //隐藏元素

 });

$("#show").click(function(){

$("p").show(/*slow fast 毫秒数*/);//显示元素

 });

 

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

$("p").toggle(/*slow fast 毫秒数*/);

//隐藏/显示来回切换

});

 

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

$("#div1").fadeIn(/*slow fast 毫秒数*/); //用于淡入隐藏的元素

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

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

$("#div1").fadeOut(/*slow fast 毫秒数*/); //用于淡出可见元素

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});

 

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

$("#div1").fadeToggle(/*slow fast 毫秒数*/);//淡入/淡出来回切换

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

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

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

/*前取值  slow fast 毫秒数 */

/*后取值  0-1  为透明度*/

});

 

$("#flip").click(function(){

      /* slow fast 毫秒数 */

$("#panel").slideDown(); //向下滑动元素

$("#panel").slideUp();  //向上滑动元素

});

$("#flip").click(function(){

      /* slow fast 毫秒数 */ 

$("#panel").slideToggle();//向上/下滑动元素

});

 

 

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

$("div").animate({ //创建动画 改变多个属性

left:'250px',

opacity:'0.5',

height:'+=150px', //相对值

width:'150px'

},/* slow fast 毫秒数 */ 

);

});

 

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

$("div").animate({

height:'toggle' //属性可设为方法

});

});

 

 

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

var div=$("div"); //队列功能 一步步执行div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");

});

 

$("#stop").click(function(){

$("#panel").stop(); //适用于jquery所有效果函数

//在它们完成之前 停止动画或效果

});

 

 

 

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

//链   链接在一起  一条街一条  点连接方法

 

DOM = Document Object Model (文档对象模型)

 

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

}); //获得元素文本内容

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

}); //获得元素内容(含HTML标记)

$("#btn1").click(function(){

alert("值为: " + $("#test").val());

 //获得输入的值

alert($("#runoob").attr("href"));

//获得链接中href属性的值

});

 

 

$("#btn1").click(function(){

$("#test1").text("Hello world!");

});

$("#btn2").click(function(){

$("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

$("#test3").val("RUNOOB");

});

 

.attr()方法  更改链接中的herf属性的值

 

阅读更多
想对作者说点什么? 我来说一句

JQuery基础.pdf

2011年10月29日 416KB 下载

传智播客JQuery01

2017年08月15日 58MB 下载

jQuery基础,有例子,很详细

2010年10月12日 14.55MB 下载

jquery基础

2012年12月29日 635KB 下载

jQuery基础

2014年09月16日 582KB 下载

没有更多推荐了,返回首页

不良信息举报

JQuery基础

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭