JQuery学习笔记

一、入口函数

//第一种方式
$(document).ready(function () {
        //比较复杂
    })
//s第二种方式
$(function () {
        //简单，推荐使用
    })

二、$符号简介

• JQuery的别称，一个简写方式
• 也可以吧$替换为jQuery

jQuery(function () {
      
    })

• $是JQuery中的顶级对象，就像原生DOM中的windows对象一样

三, JQuery对象和原生DOM对象的区别

• 虽然都可以实现节点操作，但是两个对象是不同的对象，方法不互通
• JQuery和DOM的互相转换，DOM===>JQuery,('div')[index]或者$('div').get(next)。

四、常用API

（一）、选择器

• 和CSS类选择器一模一样的写法，$('div')
• 选择出来的‘’元素具有隐式迭代的能力，不用使用for循环
• 基本选择器
• 层级选择器（子代，兄弟，毗邻等）
• 基本筛选器（:eq(index),:gt(index)等）
• 内容匹配（是否包含等）
• 属性，子元素等
• 更多内容查看文档

（二）、CSS样式控制

• 使用css方法传入css样式名和样式属性即可

 $(function () {
        $('.mydiv').css('backgroundColor','red');
    })

• 只传入样式名可以获取样式的值
• 如果有多个样式需要修改，可以传入一个键值对，来修改

 $(function () {
        $('.mydiv').css({'backgroundColor':'red',
        'width':'500px'});
    })

（三）、类操作

• 添加类名，addClass
• 删除类名，removeClass
• 切换类名， toogleClass

（四）、动画效果

-显示隐藏，show，hide
-滑动切换，slideUp,slideDown,slideToggle,加入stop函数可以阻止动画排队

• 淡入淡出，fadeIn，fadeOut, fadeToggle, fadeTo
  -自定义动画，animate，有几个参数，params以对象的形式传入，包含想要更改的样式属性，这个属性是必填属性

（五）、属性操作

-获取，设置属性 prop，这个函数css函数一样，只设置属性名的时候可以获取属性值，设置了属性名和属性值以后，可以设置属性值
-data，可以将属性存入缓存，页面一刷新就消失

（六）、内容文本操作

• html,不带参数的时候获取元素内部的html代码，带参数的时候将元素内部的html代码重新设置成参数的值
  -text，不带参数的时候获取元素内部的文本值，带参数的时候将元素内部的文本值设置为参数值
  -val，获取元素的value值，同上

五、链式编程

• 可以使用链式原则，使代码量变少

    $(function () {
        $('.mydiv').on('click',function () {
            $(this).css('backgroundColor','red').siblings('div').css('backgroundColor','');
        })f
    })

• 一定要弄清楚是在给哪个元素执行操作