jQuery入门（一）

1、使用$获取jQuery对象

• 1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都使用 $
• 2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2、jQuery 选择器

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

3、jQuery 层级选择器

 

4、jQuery 设置样式

//给div2元素添加color属性
$('.box2').css('color','pink')

5、隐式迭代（重要）

遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

6、jQuery 筛选选择器

7、jQuery 筛选方法（重点）

 重点记住： parent()  children()  find()  siblings()  eq()

8、jQuery 里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

 

9、 链式编程 

10、操作 css 方法

 //排他思想，自己的颜色显示，兄弟的颜色清空
       $('.box').css({
        width:200,
        height:200,
        color:'red'
       });

11、设置类样式方法

12、动画效果

 

 

$("button:eq(0)").click(function() {
   $("div").show(1000, function() {
        alert(1);
        });
})

$("button:eq(1)").click(function() {
   $("div").hide(1000, function() {
        alert(1);
        });
})

$("button").eq(2).click(function() {
   $("div").toggle(1000);
})
            

• （1）参数都可以省略， 无动画直接显示。
• （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
• （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
• （4）fn:  回调函数，在动画完成时执行的函数，每个元素执行一次。

13、事件切换

/ 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                $(this).children("ul").slideToggle();
            });

• （1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
• （2）out:鼠标移出元素要触发的函数（相当于mouseleave）
• （3）如果只写一个函数，则鼠标经过和离开都会触发它

/事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });

 14、淡入淡出效果

 （1）opacity 透明度必须写，取值 0~1 之间。

  $("button").eq(3).click(function() {
                /  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);

            });

15、 自定义动画 animate

 （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

<button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })

16、设置或获取元素固有属性值 prop()

17、数据缓存 data() 

18、内容文本值

 

19、遍历元素

 

20、创建元素

 

21、添加元素

•  内部添加元素，生成之后，它们是父子关系。
• 外部添加元素，生成之后，他们是兄弟关系。

22、删除元素

•  remove 删除元素本身。
• empt() 和  html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

23、尺寸、位置操作