前端学习☞jquery

阅读量：4958 次

发布时间：2019-06-12

本文共 8638 字，大约阅读时间需要 28 分钟。

一什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()           //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法        // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;        //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象var variable = DOM 对象$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

二寻找元素(选择器和筛选器)

2.1 选择器

2.1.1 基本选择器

1 $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2.1.2 层级选择器

1 $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

2.1.3 基本筛选器

1 $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

2.1.4 属性选择器

1 $('[id="div1"]')   $('["xhb="2b"][id]')

2.1.5 表单选择器

1 $("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

左侧菜单

tab切换

2.2 筛选器

2.2.1 过滤筛选器

1 $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

2.2.2 查找筛选器

$("div").children(".test")     $("div").find(".test")                                  $(".test").next()    $(".test").nextAll()    $(".test").nextUntil()  $("div").prev()  $("div").prevAll()  $("div").prevUntil()    $(".test").parent()  $(".test").parents()  $(".test").parentUntil()  $("div").siblings()

三操作元素(属性，css，文档处理)

3.1 属性操作

--------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------HTML代码/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("").css("color","red")

注意：

是否可见是否可见

attr和prop

实例(全反选)

    
             Title

实例之模态对话框

3.2 文档处理

//创建一个标签对象    $("")//内部插入    $("").append(content|fn)      ----->$("p").append("Hello");    $("").appendTo(content)       ----->$("p").appendTo("div");    $("").prepend(content|fn)     ----->$("p").prepend("Hello");    $("").prependTo(content)      ----->$("p").prependTo("#foo");//外部插入    $("").after(content|fn)       ----->$("p").after("Hello");    $("").before(content|fn)      ----->$("p").before("Hello");    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");//替换    $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");//删除    $("").empty()    $("").remove([expr])//复制    $("").clone([Even[,deepEven]])

    
             Title

实例(复制样式条)

3.3 css操作

CSS        $("").css(name|pro|[,val|fn])    位置        $("").offset([coordinates])        $("").position()        $("").scrollTop([val])        $("").scrollLeft([val])    尺寸        $("").height([val|fn])        $("").width([val|fn])        $("").innerHeight()        $("").innerWidth()        $("").outerHeight([soptions])        $("").outerWidth([options])

实例(返回顶部)

四事件

页面载入    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。    $(document).ready(function(){}) -----------> $(function(){})事件处理    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定    //  click事件；    [selector]参数的好处:        好处在于.on方法为动态添加的元素也能绑上指定事件；如：        //$('ul li').on('click', function(){console.log('click');})的绑定方式和        //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个        //li：$('ul').append('js new li
')；这个新加的li是不会被绑上click事件的        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加        //li:$('ul').append('
js new li
');这个新生成的li被绑上了click事件        [data]参数的调用:             function myHandler(event) {                alert(event.data.foo);                }             $("li").on("click", {foo: "bar"}, myHandler)

实例(面板拖动)

    
             bigger

实例(放大镜)

五动画效果

Title

hello

显示隐藏

滑动

    
             Title

淡入淡出

Title

helloworld helloworld helloworld

回调函数

六扩展方法 (插件机制)

6.1 用JQuery写插件时，最核心的方两个方法

$.fn.extend({
          "print":function(){
              for (var i=0;i

6.2 定义作用域

定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

(function(a,b){return a+b})(3,5)       (function ($) { })(jQuery);//相当于        var fn = function ($) { };        fn(jQuery);

6.3 默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。

/step01 定义JQuery的作用域(function ($) {    //step03-a 插件的默认值属性    var defaults = {        prevId: 'prevBtn',        prevText: 'Previous',        nextId: 'nextBtn',        nextText: 'Next'        //……    };    //step06-a 在插件里定义方法    var showLink = function (obj) {        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });    }    //step02 插件的扩展方法名称    $.fn.easySlider = function (options) {        //step03-b 合并用户自定义属性，默认属性        var options = $.extend(defaults, options);        //step4 支持JQuery选择器        //step5 支持链式调用        return this.each(function () {            //step06-b 在插件里定义方法            showLink(this);        });    }})(jQuery);

View Code

参考：