JQuery学习笔记

1,引入jquery
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#jj").click(function(){
    $("p").hide();
  });
});
</script>

2,在文档加载后激活函数：用ready 例如下
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});
ready有三种写法
语法 1

$(document).ready(function)

语法 2

$().ready(function)

语法 3

$(function)

3,自己简单总结一下自己学到的
 $("button") 表示引用当前html中的所有的button元素对象
 $("#test")  表示引用当前id是test的这个元素对象
 $(".test")  表示引用当前标签属性class为test的元素对象
还有一个文档
$("*")     选取所有元素     
$(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叫选择器
根据我自己的理解就是拿到元素的对象 或一个 或是一个集合

4,
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：
$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){
    // 动作触发后执行的代码!!
});
类似与于点击事件的这种方法有很多
dblclick() 双击
mouseenter() 鼠标穿过元素时
mouseleave() 鼠标离开元素时
mousedown()  鼠标穿过并且按下
mouseup()   鼠标点击松开按钮时
hover()   两个回调一个是到元素上 和离开元素
focus()   获取焦点
blur()   失去焦点的时候
5
与元素隐藏$("#p1").hide() 相对于的还有show()方法

语法:
$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：
实例
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000,function(){
    alert("caonima")});
  });
});
</script>
切换显示隐藏可以使用toggle();方法  当然 你也可以设置两个参数同上$(selector).toggle(speed,callback);
6,
jquery还支持淡入淡出效果
    fadeIn()
    fadeOut()
    fadeToggle()
    fadeTo()
分为无参  单参 slow fast    还可以自定义设置时间毫秒数 toggle 就不多说了同上

简单说一下fadeto()
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法:
$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：
7,
jquery中比较重要的一部分 jQuery DOM 能力
根据我自己的理解就是说白了就是操作元素本身 和元素的属性  

    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容（包括 HTML 标记）
    val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
实例
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

实例
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：
实例
$("button").click(function(){
  alert($("#runoob").attr("href"));
});
text()方法和 val()方法的区别就是  text只显示一个元素的文本信息,而val()方法拿到的是元素的属性value值,是可变的,input text是有value属性的 输入什么拿到的就是什么属性

然后就是还有一个相对于这三个方法的扩展
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
    });
  });

});
</script>
这三个函数都可以加一个回调  其中参数i为索引, origtext为上一次显示的文本 同理其他的两个也是

attr属性
设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});
用于改变一个值
attr()方法也可以添加回到  也是i为索引 roigtext为之前的值

8,更改文本内容

    append() - 在被选元素的结尾插入内容
    prepend() - 在被选元素的开头插入内容
    after() - 在被选元素之后插入内容
    before() - 在被选元素之前插入内容
   说白了就是上下左右 后两个是上下

9,删除元素

$("#div1").remove();

$("#div1").empty();
区别是remove是删除自己以及子项 empty只是删除子项
remove还可以添加一个原则器参数过滤要删除的信息
10,
jquery还提供了添加和删除css样式的方法

    addClass() - 向被选元素添加一个或多个类
    removeClass() - 从被选元素删除一个或多个类
    toggleClass() - 对被选元素进行添加/删除类的切换操作
    css() - 设置或返回样式属性

我们先来看一下什么是css样式

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}
也就是说对这个css进行操作  .blue表示一个类 添加或者删除的也就是blue 或者 important  如果需要添加多个样式则在参数中以空格分开,都是有双引号的

11,
还提供一个css方法 设置或返回样式
返回就是拿到设置样式的具体值
例如
$("p").css("background-color");
返回的是色值例如255,0,0
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");

如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
12
jquery对于元素的尺寸也是可以获取的
分三个概念

    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()
两两一对 ,其实本质上就是css的盒子模型
第一对就是内容的大小
第二对就是包含内边距的大小
第三对也就是包括内边距和外边距的大小
这里面多了一个边框的概念 默认看起来有个2px左右