2015-07-17

it技术

Head First labs学习笔记

各章节例子：http://www.headfirstlabs.com/books/hfjquery

本书在线版：https://www.safaribooksonline.com/

笔记开始写jQuery

$(document).ready(function(){     //web页面准备就绪时，执行下面操作
    $("p").click(function(){     //单击任意p时
        $(this).hide();     //隐藏当前p
    });     //结束p的click函数
});     //结束文档ready函数

JavaScript解释器并不改变HTML和CSS源文件，只是改变浏览器内存中页面DOM表示。

函数简写名
jQuery() 简写为 $

jQuery函数中可以放入三种不同的内容
CSS 放入CSS选择器，jQuery会返回与这个选择器匹配的元素集
HTML 放入HTML串，动态向浏览器增加DOM元素
JavaScript 。。。

笔记demo

$(document).ready(function(){
  $("#move_up").click( function() {
    $("#change_me").animate({top:30},200);
  });     //动画 距离顶部30个像素 速度200ms
  $("#move_down").click( function() {
    $("#change_me").animate({top:500},2000);
  });   //动画 距离顶部500个像素 速度2000ms
  $("#color").click( function() {
    $("#change_me").css("color", "purple");
  });   //更改颜色为purple
  $("#disappear").click( function() {
    $("#change_me").toggle("slow");
  });     //隐藏/显示直接切换
});

笔记选择器

// 选择器 方法
$("h1").heide();  //隐藏页面所有h1元素
$(".my_class").slideUp(); //所有css类my_class成员元素都向上滑动
$("#my_id").fadeOut();  //将CSS ID为my_id的元素淡出，直到不可见

CSS选择器选择元素为元素增加样式
jQuery选择器选择元素为元素增加行为

顾名思义，jQuery重在查询，用选择器请求一个元素时，JavaScript解释器会请求DOM为你获取这个元素，如果请求一个带嵌套元素的元素，则jQuery还会把嵌套元素也交给你。

1 2	img > "" > $() > $("img") //元素》选择器用字符串形式，所以必须加引号》使用jQuery快捷方式来包含这个选择器》

笔记 jQuery翻译

$("button").click(function(){})
// 按钮元素，用户点击时，运行大括号里面所有jQuery语句
$("p").hide;
// p段落元素，变得不见消失
$("#myTop").css({"background-color":"blue"});
// ID为myTop的元素，增加CSS规则，背景色，设置为蓝色

向下滑动demo

1	alert("alert语句可以用来测试一个函数是否得到正确调用");

选择器类名

选择器类名必须以下划线(_)、短横线(-)或字母(a~z)开头，后面可以是多个下划线、短横线、字母或数字。如果第一个字符是短横线，那么第二个字符必须是一个字母或下划线，而且类名长度必须至少2个字符。

变量名

变量名不能包含任何数学运算符（），也不恩那个有空格或标点。变量名中可以包含下划线。变量名不能用JavaScript关键字命名（如window,open,array,string,location），注意变量名是区分大小写的。

增加随机数字删除上个插入内容demo

1
2

Math.floor     //方法将一个数取整为最接近的整数，并返回结果
Math.random     //方法返回一个介于0和1的随机数，将它乘以一个数时肯定可以得到介于0和所乘那个数之间的一个数

this当前元素

选择“当前”元素，在整个代码中，$(this)的含义会改变，取决于它在哪里引用

1	$(this).slideUp();

jQuery方法

jQuery和JavaScript中可以使用方法完成工作，可以把方法认为是一个动词，方法完成的就是web页面动作。

.append()将指定的内容插入DOM，内容增加到调用这个方法元素的最后（元素标签闭合前。）

.removw()从DOM删除元素

删除

1	$("div").remove();

事件jQuery API

监听事件

$("#myElement").bind('click', function(){
     alert($(this).text());
});
//bind 监听事件
$("#myElement").unbind('click');
//unbind 移除 bind 监听事件

遍历处理动作元素

根据选择选择器循环处理一组元素，循环也称为迭代，就是一次一个遍历一组元素，在这个过程中对各个元素分别做某种处理。

$(".guess_box").each(function(){
     $(this).unbind('click');
});
//each 遍历元素

函数

创建函数已便代码块重用。

函数声明

1
2
3

function myFunc1(){
  $("div").heide();
}

函数表达式

1
2
3

var myFunc2 = function() {
  $("div").show();
}

向函数传入变量

function welcome (name) {
  alert ("Hello"+ name);
}

// call our function
welcome("John")

各章节例子：http://www.headfirstlabs.com/books/hfjquery

jQuery由John Resig始创

DOM从哪里来

技术审校团队：