zoukankan      html  css  js  c++  java
  • jQuery入门讲解

    jQuery设计思想:

    (1)选择页面元素

    css选择器:

    $(document) 选择整个文档对象, $("#myId") 选择id为myId的页面元素, $("div.myClass")选择class为myClass的div元素

    jQuery特有的选择器:

    $("a:first")选择页面中第一个a元素,$("tr:odd")选择表格的奇数行,$("div:visible")选择可见的div元素。

    (2)方法函数化

    原生的:window.onload,innerHTML,onclick。

    jQuery的:$(),html(),click()。

    在jQuery代码中很少看到有等号出现的情况。因为它都函数化了,意思就是用函数的形式改写了原生的操作。比如:div.innerHTML = "chaojidan",$("div").html("chaojidan");div.onclick = function(){},$("div").click(function(){});

    (3)原生与jQuery的关系

    原生和jQuery可以共存,比如:$("div").click(function(){  this.innerHTML = "chaojidan";})

    原生和jQuery不能混用,比如:$("div").innerHTML = "chaojidan"; div.html("chaojidan"),这两个都是错误的写法。

    (4)改变结果集

    强大的过滤器:$("div").has("p")选择包含p元素的div元素,$("div").not(".myClass")选择class不等于myClass的div元素,$("div").filter(".myClass")选择class等于myClass的div元素。

    相邻元素查找:$("div").next("p")选择div元素后面的(必须紧挨着)第一个p元素,$("div").parent()选择div元素的父元素,$("div").children()选择div元素的所有子元素。

    (5)链式操作

    $("div").        //找到页面上的所有div元素

      find("h3").    //在div元素下找h3元素

        eq(2).    //取第三个h3元素

          html("chaojidan");    //设置它的内容为chaojidan

    jQuery还提供了.end方法,此方法可以使结果集后退一步。比如:

    $("div").        //找到页面上的所有div元素

      find("h3").    //在div元素下找h3元素

        eq(2).    //取第三个h3元素

          html("chaojidan").  //设置它(第三个h3元素)的内容为chaojidan

            end().    //此时的this指向就是在div元素下找h3元素的那个集合

              .eq(0).    //取第一个h3元素

                .html("chaojidan2");   //设置它的内容为chaojidan2

    (6)取值与赋值合体

    $("h1").html(),没有参数,表示取出h1的值;$("h1").html("hello"),有参数,表示对h1进行赋值。

    取值是对一组元素的第一个元素做操作,赋值是对一组中的所有元素做操作。

    .css(),.attr(),这些函数,当传入一个参数时,是取值,当传入两个参数时,是赋值。

    (7)元素的移形换位

    直接移动该元素:$("div").insertAfter($("p"));把div元素移动到p元素的后面;$("p").appendTo($("div"));把p元素移动到div元素的里面。比如:$("div").insertAfter($("p")).css("background","red");这里会把div元素的背景颜色设置成红色。

    移动其他元素:$("p").after($("div"))把div元素移到p元素的后面;$("div").append($("p"));把p元素移动到div元素的里面。比如:$("p").after($("div")).css("background","red");这里会把p元素的背景颜色设置成红色。

    (8)强大的创建

    $("#ul").append("<li>aaa</li>");创建一个li元素,把它添加到ul中。

    $("<li>");创建一个li元素

    $("div").clone().appendTo($("p"));克隆一个div元素,并把这个克隆的div添加到p元素里面,原来的那个div不变。

    (9)工具方法

    构造函数上的方法(静态方法):$.each([],function(){}),$.trim()。原生的js可以调用这些方法。比如:var liList = document.getElementsByTagName("li");$.each(liList,function(index,element){});

    原型上的方法(实例方法):$("div").each(function(index,element){})

    (10)事件操作

    独立事件:click()针对click事件,mouseover()针对mouseover事件,比如:$("div").click(function(){}),点击div元素会触发回调函数。

    通用事件:bind(),one(),unbind(),比如:$("div").bind("click mouseover",function(){}),这里给div元素绑定了click和mouseover两个事件。

    jquery中,如果在回调函数中,返回false,表示阻止事件冒泡以及阻止默认操作。

    在js原生方法中,div.onclick = function(){},在回调函数返回false,也有一样的效果。

    attachEvent也有一样的效果,但是addEventListener就不行。

    (11)运动效果

    常见效果:.fadeIn()淡入,.fadeOut()淡出,.slideDown()向下展开,.slideUp()向上卷起。

    比如:$("#input1").toggle(function(){$("#div1").fadeOut()}, function(){$("#div1").fadeIn()}),点击按钮input1,就会把div隐藏,再次点击input1,就会把div显示。

    复杂效果:.animate()动画操作,stop()。比如:

    $("#div1").hover(

      function(){

          $(this).animate({

            300,

            height:300

          })

      },

      function(){   

         $(this).animate({

            200,

            height:200

          })

      }

    )

    鼠标移入div元素,元素div就会变成大到300*300,鼠标移出div元素,元素div就会缩小到200*200.

    stop方法是用来停止动画的。

    (12)插件机制

    在jQuery的源码上进行扩展。是其他人写的,不是jQuery官方写的,比如你自己也可以写一个基于jQuery的list列表插件list.js。在使用此插件时,你需要先引入jQuery,然后再引入你的list.js。如果想详细了解jQuery插件请看:http://www.cnblogs.com/chaojidan/p/4213942.html

    (13)UI组件

    jQuery官方提供的功能效果和UI样式。比如:选项卡Tab,拖拽Draggable。你使用这些功能效果时,除了需要引入jQeury外,还需要引入jQuery.ui.js(这个js文件里面实现了这些功能效果)。如果想深入了解jQuery UI,请看:http://www.cnblogs.com/chaojidan/p/4220941.html

    加油!

  • 相关阅读:
    工商银行在线支付接口
    Runtime-compiler和Runtime-only的区别:
    响应式网站技术精要总结
    ajax基础
    jquery选择器 笔记
    js数组去重的几种方法
    js中的call apply bind
    es6中的类
    bootstrap组件
    es6中的模块化输出
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4212072.html
Copyright © 2011-2022 走看看