jQuery学习笔记

一，jQuery简介

1. 是一个js框架
2. 可以让程序员写的更少，但是实现的更多
3. jQuery本身就是通过js语言写的一个 js文件
4. 作用就是为了简化js代码
5. 可以像css一样获取页面中的元素
6. 可以像css一样批量修改元素样式
7. 可以解决部分兼容性问题

    js库有两个版本，第二个是压缩版，带min的将所有的空格注解等全部去掉，压缩成行，内容没有改变，大小更小。第一个就是开发学习版本。

二，javascript当中的函数操作

1.事件

  - 什么是事件： 指一些特定的时间点，事件包括：状态改变事件、鼠标事件、键盘事件

       1.onchange         HTML元素改变
       2.onclick          用户点击 HTML 元素
       3.onmouseover      鼠标指针移动到指定的元素上时发生
       4.onmouseout       用户从一个 HTML 元素上移开鼠标时发生
       5.onkeydown        用户按下键盘按键
       6.onload           浏览器已完成页面的加载
       7.onbiur onfocus     焦点失去事件 焦点获得事件
       8.网页加载完毕的时候自动执行这个方法  
         window.onload = function(){

          }；

 一， 给标签绑定事件的方式，有两种
1. 在标签内部添加事件属性
    在事件方法中this代表的是window对象
2. 动态绑定事件，通过js代码给元素添加事件
    在事件方法中的this代表的是事件源对象

二，事件的取消

- 在事件中执行return false; 可以取消掉当前的事件

2.元素的操作

1. 查找元素   除了id是全局唯一的，其他的返回的都是一个集合
- 通过id查找
    var d = document.getElementById("id");
- 通过标签名查找 
    var arr = document.getElementsByTagName("标签名");
- 通过class查找
    var arr = document.getElementsByClassName("class");
- 通过name查找
    var arr = document.getElementsByName("name");
- 获取body    
    document.body;

2. 创建元素
    var div  = document.createElement("div");
3. 添加元素
    父元素.appendChild(新元素);
4. 插入元素
    父元素.insertBefore(新元素,弟弟元素); 就是指新元素插入到父元素子代的哪一个元素前面
    父元素.append(d);  // 在被选中元素的里面添加，添加在被选中元素里面的末尾
    父元素.prepend(d); //添加在被选中元素里面的最前面添加
5. 删除元素
    父元素.removeChild(被删除的元素);

6. 获取和修改元素的样式
    元素对象.style.样式名称
    元素对象.style.样式名称 = "值";
7. 获取和修改元素的文本内容
    元素对象.innerText
    元素对象.innerText = "xxx";
8. 获取和修改元素的HTML内容
    元素对象.innerHTML
    元素对象.innerHTML = "<div>xxx</div>";

9.获取网页的窗口尺寸

- 宽度：
    document.body.parentElement.clientWidth
- 高度：
    document.body.parentElement.clientHeight

 

3.定时器的操作

setTimeout(方法名,time)

设置一个定时器，在定时器时间到后执行一次

setInterval(方法名,time)

以固定的时间间隔重复调用一个函数或者代码段 

如果需要关闭，我们需要拿到这个方法的返回值

获取返回值   var time = setInterval（3000）；

//关闭定时器  clearInterval(time);

4.操作节点元素

<script>
      元素.parentNode     返回节点的父节点
          例子：：document.getElementById("dd").parentNode
      元素.childNodes      返回子节点集合

      元素.firstChild      返回节点的第一个子节点，最普遍的方法是返回该元素的文本节点

      元素.lastChild       返回节点的最后一个子节点

     元素.nextSibling     该节点的下一个节点

      元素.previousSiling      该节点的上一个节点
</script>

5.js操作时间函数

 

三，jQuery当中的函数操作

1，jquery组件库，方法的创建

 

        加载事件有两种写法，一种简写方式，一种复杂一点点的

jq当中自定义函数定义在加载事件当中，window则是全局加载

2,jQuery中的选择器

a.基础选择器
1. 标签名选择器   $("div")
2. id选择器        $("#id")
3. 类选择器        $(".class")
4. 分组选择器    $("div,#id,.class")
5. 任意元素选择器   $("*")

b.层级选择器（子代元素选择器）

 1. $("div span")     匹配div里面所有的span元素
2. $("div>span")     匹配div里面所有的span子元素
3. $("div+span")     匹配div的弟弟元素span (div后面的第一个span元素)
4. $("div~span")     匹配div的弟弟们span元素（div后面是所有的span元素）

c.层级方法d

1. 获取元素的所有兄弟元素  这个返回的是一个jq集合
        $("#abc").siblings("div");
2. 获取元素的哥哥元素 ，紧挨着的那个 
        $("#abc").prev("div");
3. 获取元素的哥哥们元素  紧挨着的那个
        $("#abc").prevAll("div");
4. 获取元素的弟弟元素
        $("#abc").next("div");
5. 获取元素的弟弟们元素
        $("#abc").nextAll("div");  
6.获取元素的直系父亲元素
        $("#abc").parent()； 

7.获取某个元素下面的所有子元素（不包括子元素里面的其他元素）
         $(#"abc").children()     **children里面可以添加其他过滤器

 d，过滤选择器

1. $("div:first")          匹配第一个div元素
2. $("div:last")         匹配最后一个div元素


3. $("div:even")         匹配所有div中下标为偶数的div元素  从0开始
4. $("div:odd")         匹配所有div中下标为奇数的div元素 从0开始


5. $("div:eq(n)")         匹配下标为n的div元素 
6. $("div:lt(n)")         匹配下标小于n的div元素
7. $("div:gt(n)")         匹配下标大于n的div元素


8. $("div:not(.abc)")         匹配class值不为abc的所有div



###子元素选择器
1. $("div:first-child")            匹配是第一个子元素的div元素
2. $("div:last-child")             匹配是最后一个子元素的div元素
3. $("div:nth-child(n)")         匹配是第n个子元素的div元素  从1开始

e，内容，属性选择器

###内容选择器

1. $("div:has(p)")  匹配所有包含p子元素的div
2. $("div:empty") 匹配空的div
3. $("div:parent") 匹配非空的div
4. $("div:contains('xxx')") 匹配包含xxx文本的div



###属性选择器
1. $("div[id]") 匹配包含id属性的div元素
2. $("div[id='xxx']") 匹配id值为xxx的div元素
3. $("div[id!='xxx']") 匹配id值不为xxx的div元素

f， 可见选择器（显示隐藏）

1. $("div:hidden")   匹配所有隐藏的div
2. $("div:visible")   匹配所有显示的div
- 显示隐藏相关的方法
    1. 让隐藏元素显示
        $("div:hidden").show();
    2. 让显示的元素隐藏
        $("div:visible").hide();
    3. 隐藏显示切换
        $("#abc").toggle();

g，表单元素选择器

1. $(":input")    匹配表单中的所有控件
2. $(":password")   匹配密码框
3. $(":radio")   匹配单选
4. $(":checkbox")   匹配多选
5. $(":checked")   匹配所有选中的单选、多选、下拉选
6. $("input:checked")   匹配所有选中的单选、多选
7. $(":selected")     匹配所有选中的下拉选

3.jq当中的元素操作

a，创建和删除元素

####创建元素

创建元素我们一般采用字符串拼接的方式去创建，在追加，或者前插进其他元素当中

var d = $("<div id='d1' class='c1'>abc</div>");

####删除元素
    js： 父元素.removeChild(被删除的元素);
    jq： 被删除的元素.remove();

b。添加元素操作

 ####元素的追加操作
  父元素.append(d);   在被选中元素的里面添加，添加在被选中元素里面的末尾
  父元素.prepend(d); 添加在被选中元素里面的最前面添加

#### 插入元素
    js当中:父元素.insertBefore(新元素,弟弟元素);
    兄弟元素.before(新元素);  新元素添加到兄弟元素的前面
    兄弟元素.after(新元素);  新元素添加到兄弟元素的后面

c，元素的属性操作

####获取和修改元素的文本内容
    元素对象.text(); //获取
    元素对象.text("abc"); //修改


####获取和修改元素的html内容
    元素对象.html();//获取
    元素对象.html("<h1>xxx</h1>"); //修改
####获取和修改表单的value
val() - 设置或返回表单字段的值


####获取和修改元素的css样式
    元素对象.css("color"); //获取color样式的值
    元素对象.css("color","red"); //修改
    元素对象.css({"width":"100px","height":"200px"});

   ***也可以直接定义一个class的样式表然后，将样式表添加给元素，也可以删除样式表

    元素对象.addClass("class名字")；

    元素对象.removeClass（"class名字"）


####获取和修改元素的属性    attr = attribute(属性)
    元素对象.attr("id"); 获取元素的id属性值
    元素对象.attr("id","abc"); 设置id值为abc

  ***如果属性值是true或者false 使用prop来获取
    元素对象.prop("checked");  获取checked的值

 对class的属性操作

*****对class属性操作
$(".adc").addClass():   添加class属性值
$(".adc").removeClass():      删除class属性值
$(".adc").toggleClass():     切换class属性()
   
toggleClass("one"):
判断如果元素对象上存在 class="one"，则将属性值one删除掉。
如果元素对象上不存在 class="one"，则添加

 4.jq当中的事件，方法

 a, 事件的绑定和取消绑定

   （jq当中的事件在加载函数当中直接进行绑定，js当中的事件在标签当中进行绑定，事件名字的话，如 js： onclick。    jq：.click。 js的事件名字去掉on一般就是jq当中的事件名字）

事件的绑定

 *原生html元素就是指我们body当中有的元素，
动态生成的元素一般是我们后面通过添加元素添加进去的元素*

1.对于原生html元素的事件绑定
       元素.事件（方法）
     $(".abc").click(function(){
             //代码
       });
2.使用bind进行事件绑定
    $(".abc).bind("事件类型","方法，或者匿名函数");

3.对于动态生成的html元素，我们一般使用on来绑定事件
语法：： $(原生元素).on("事件名称","选择器"，匿名函数)
例子：： 给所有input标签值为333的的input标签绑定点击事件
    $(document).on("click","input[value=333]",function(){
           //代码
    });

事件的解除绑定（用的少）

    使用 $(".abc").unbind("事件类型")，不加的话就是取消所有绑定事件

 b,常见的事件方法

5.jq当中的效果

a.动画（.animate();）

 $(function(){
        $(".btn1").click(function(){
            //让球绕着屏幕转一圈
        $("#ball").animate({"left":"1840px"},2000)
        .animate({"top":"880px"},2000)
        .animate({"left":"0px"},2000)
        .animate({"top":"0px"},2000);

        });
    });

animate({这里写效果}，完成这效果的时间)；

              ****编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

 b，停止动画

调用stop()方法停止正在进行的动画

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

      $("#panel").stop();

});

c，滑动

 slideDown(speed,callback)         方法用于向下滑动元素。

 slideUp(speed,callback)         方法用于向上滑动元素。

 slideToggle(speed,callback)         方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

以上三个方法里面的参数都是可选的

speed：事件毫秒值 定义多长事件完成这一操作

callback  在此方法执行完毕后执行callback函数或者方法

d，隐藏显示淡入淡出

元素的显示与隐藏

$(".abc").hide(speed,callback);      隐藏

$(".abc").show(speed,callback);      显示
    可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

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

$(".abc").toggle(speed,callback);   显示隐藏，如果本来是显示，执行这个方法就是隐藏
  
  可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

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

元素的淡入淡出显示

  fadeIn()       用于淡入已隐藏的元素
$(".abc").fadeIn(speed,callback);
  fadeOut()      用于淡出可见元素
$(".abc").fadeOut(speed,callback);
  fadeToggle()   方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
$(".abc").fadeToggle(speed,callback);