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属性的值