黑马程序员技术交流社区

标题: 【石家庄校区】笔记JQuery [打印本页]

作者: xcxiao1992 时间: 2017-11-19 17:30
标题: 【石家庄校区】笔记JQuery
本帖最后由小石姐姐于 2017-11-20 15:19 编辑

【JQuery的概述】
Ø 什么是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");
});
【JS对象和JQ对象的转换】
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对象的方式二";
});
【JQ显示和隐藏】
Ø 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...
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>
【基本过滤选择器】

<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>
【内容选择器】

<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
【属性选择器】

【表单选择器】

<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
【表单属性选择器】

【JQuery的选择器】
* 基本过滤选择器：
* odd ：
* even :
【JQuery中添加和移除样式】
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
* addClass();
* removeClass();

【JQuery对属性的操作的方法】
* attr();
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();

【JQuery的DOM操作】

* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
【JQuery的遍历】
遍历的方式一：
* $.each(objects,function(i,n){

});
遍历的方式二:
* $(“”).each(function(i,n){

});

$(function(){
var arrs = new Array("张森","张凤","张芙蓉");
// 将这个数组转成JQ的对象使用each方法.
/*$(arrs).each(function(i,n){
alert(i+" "+n);
});*/
$.each(arrs,function(i,n){
alert(i+" "+n);
});
});

【JQuery的选择器】

JQuery常用事件：

JQ的事件切换：
* toggle(); --单击事件的切换
* hover(); --鼠标悬停的切换
1.jquery介绍
      工具类 EXTJS
      框架 AngularJS  Angular  Vue
  版本
      1.X 兼容IE6.7.8
      2.X 不兼容IE6,7,8，对最新JS特性也不支持
      3.X 不兼容IE6.7.8, 支持JS最新的特性

jquery对象，实际上是DOM数组，我们操作JQUERY对象，实际就是操作里面的每一个元素。只有被$()包裹起来的才是jquery对象
jquery与DOM对象的转换
      jquery=>dom  $("div")[0]
      dom=>jquery  $(dom对象);
jquery元素的显示和隐藏
      show() hide()
选择器
      ID，类，标签，并列，子孙，子

操作属性
      prop :非自定义属性
      attr :自定义属性

DOM操作
      A.append(B)
      $().each(function(index, element){

      });
事件绑定
$().onClick();

JQuery：
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
* JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* window.onload和$(document).ready(function(){});区别?
      * onload页面加载完成后才会执行.执行一次
      * ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
      * JS-->JQuery: $(JS的对象)
      * JQuery-->JS: JQ对象.get(0), JQ对象[0]
* JQuery的选择器：(*****)
* 基本选择器：
      * ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
* 层级选择器：
      * 空格 ,> ,+ ,~
* 过滤:
      * :first,:last,:eq(),:even,:odd...
* 属性选择器:
      * [属性名],[属性名=’属性值’]...
* 表单选择器:
      * :input,:text,:password,:radio...
* 可见性:
      *
* 表单对象属性：
      * :checked,:selected,:enable,:disable
* JQuery实现效果:
* show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()
* JQuery样式操作:
* css();
* JQuery属性操作的方法:
* attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()
* JQuery文档处理:
* append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()
* JQuery的事件:
* click(),change(),submit(),dblclick(),keyUp(),keyDown()...
* toggler(),hover() ---进行事件的切换.

作者: 小石姐姐 时间: 2017-11-20 15:21
很棒，如果层次再分明一点就更好了

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2