【郑州校区】JavaWeb04-HTML篇笔记（二） - 黑马程序员技术交流社区

[AppleScript] 纯文本查看 复制代码

Ø 什么是JQuery:

JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装.

现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发.

Ø JS的常用的框架:

JQuery,ExtJS,DWR,Prototype...

Ø JQ的使用:

学习JQuery的语法.

【JQuery的入门】

Ø 引入Jquery的js文件.

<script src="../../js/jquery-1.11.3.min.js"></script>

Ø JQuery的入口函数:

// 传统的JS的方式：页面加载的事件只能执行一次.

/*window.onload = function(){

alert("aaa");

}

window.onload = function(){

alert("bbb");

}*/

// JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高.

// window.onload 等页面加载完成后执行该方法.

// $(function(){}):等页面的DOM树绘制完成后进行执行.

// $相当于JQuery

$(function(){

alert("aaa");

});

$(function(){

alert("bbb");

});

[AppleScript] 纯文本查看 复制代码

window.onload = function(){

// 传统JS方式：

var d1 = document.getElementById("d1");

// JS对象的属性和方法:

// d1.innerHTML = "JS对象的属性";

// d1.html("aaaaaa");

// 将JS对象转成JQ的对象.

$(d1).html("JS对象转成JQ对象");

}

 

             $(function(){

var $d1 = $("#d1");

// $d1.html("JQ对象的属性");

// 转成JS的对象:

// 一种方式

// $d1[0].innerHTML = "将JQ的对象转成JS对象";

// 二种方式:

$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";

});

[AppleScript] 纯文本查看 复制代码

Ø JQ的效果操作:

* show();

    * 使用一:Jq对象.show();

    * 使用二:Jq对象.show(“slow”); // slow,normal,fast

    * 使用三:Jq对象.show(毫秒值); // 1000

    * 使用四:Jq对象.show(毫秒值,function(){});

 

* hide();

    * 使用一:Jq对象.hide();

    * 使用二:Jq对象.hide(“slow”); // slow,normal,fast

    * 使用三:Jq对象.hide(毫秒值); // 1000

    * 使用四:Jq对象.hide(毫秒值,function(){});

 

* slideDown();        --向下滑动

    * 使用一:Jq对象.slideDown();

    * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast

    * 使用三:Jq对象.slideDown(毫秒值); // 1000

    * 使用四:Jq对象.slideDown(毫秒值,function(){});

 

* slideUp();        --向上滑动

    * 使用一:Jq对象.slideUp();

    * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast

    * 使用三:Jq对象.slideUp(毫秒值); // 1000

    * 使用四:Jq对象.slideUp(毫秒值,function(){});

 

* fadeIn();        --淡入

    * 使用一:Jq对象.fadeIn();

    * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast

    * 使用三:Jq对象.fadeIn(毫秒值); // 1000

    * 使用四:Jq对象.fadeIn(毫秒值,function(){});

 

* fadeOut();        --淡出

    * 使用一:Jq对象.fadeOut();

    * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast

    * 使用三:Jq对象.fadeOut(毫秒值); // 1000

    * 使用四:Jq对象.fadeOut(毫秒值,function(){});

 

* animate();        --自定义动画

* toggle();        --单击切换函数

    * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

[AppleScript] 纯文本查看 复制代码

<script>

var time ;

$(function(){

// 设置定时 5秒钟执行一个 显示广告的方法：

time = setInterval("showAd()",5000);

});

function showAd(){

// 获得元素：

//$("#adDiv").show(2000);

// $("#adDiv").slideDown(2000);

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

clearInterval(time);

// 再设置定时 5秒钟隐藏.

time = setInterval("hideAd()",5000);

}

function hideAd(){

//$("#adDiv").hide(2000);

// $("#adDiv").slideUp(2000);

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

clearInterval(time);

}

</script>

1.1.4 总结：

1.1.4.1 JQuery的选择器：

【基本选择器】(*****)

Ø id选择器

* 用法:$(“#id”)

Ø 类选择器

* 用法:$(“.类名”)

Ø 元素选择器

* 用法:$(“元素名称”)

Ø 通配符选择器

* 用法:$(“*”)

Ø 并列选择器

* 用法:$(“选择器,选择器,选择器”)

 

$(function(){

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

// alert("aaaa");

$("#one").css("background","#bbffaa");

});

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

$(".mini").css("background","#bbffaa");

});

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

$("div").css("background","#bbffaa");

});

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

$("*").css("background","#bbffaa");

});

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

$("#two,span,.mini").css("background","#bbffaa");

});

});

【层级选择器】：

Ø 后代选择器：使用空格        所有后代包含孙子及以下的元素

Ø 子元素选择器：使用>        第一层的元素（儿子）

Ø 下一个元素:使用+        下一个同辈元素

Ø 兄弟元素:使用~        后面所有的同辈元素

<script>

$(function(){

// 后代选择器:

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

$("body div").css("background","#bbffaa");

});

// body下的第一层div元素

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

$("body > div").css("background","#bbffaa");

});

// 查找下一个同辈的元素

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

$("#three + div").css("background","#bbffaa");

});

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

$("#two ~ div").css("background","#bbffaa");

});

});

</script>

[AppleScript] 纯文本查看 复制代码

<script>

$(function(){

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

$("#three div:first").css("background","#bbffaa");

});

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

$("#three div:last").css("background","#bbffaa");

});

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

$("div:odd").css("background","#bbffaa");

});

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

$("div:even").css("background","#bbffaa");

});

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

$("#three div:eq(1)").css("background","#bbffaa");

});

});

</script>