JQuery~1-白红宇

JQuery~1

阅读量：7248 次

发布时间：2019-06-29

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

本节内容：

1： jQuery是什么？

2：什么是jQuery对象？

3：寻找元素(选择器和筛选器)

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

5： jQuery节点的增删改查

6：css操作

7：事件

8：动画效果

9：扩展方法 (插件机制)

10：轮播图

jQuery文档：http://jquery.cuishifeng.cn/

1： jQuery是什么？

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2：什么是jQuery对象？

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

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

3：寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

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

3.1.2 层级选择器

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

E F    后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔    E > F  子元素选择器，匹配所有E元素的子元素F                            E + F  毗邻元素选择器，匹配所有紧随E元素之后的同级元素F E~F   匹配 prev 元素之后的所有 siblings 元素###################E~F ################找到所有与表单同辈的 input 元素HTML 代码:    
            
       Name:      
             
                 
        Newsletter:          
             
       
    
      
        jQuery 代码:    $("form ~ input")结果:    [  ]#######################E~F ##########

View Code

3.1.3 基本筛选器

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

3.1.4 属性选择器

$('[id="div1"]')   $('["alex="sb"][id='p1']') ##一个属性不够，来两个

3.1.5 表单选择器

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

View Code

筛选器根据已知的找到需要的元素。跟js的导航一样

查找筛选器：这个比刚刚的更好一点

View Code

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

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

-------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------HTML代码/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])  //固有属性采用val()---------------------------$("").css("color","red")   //ele2.css({"color":"red","background-color":"green"})

实例之左侧菜单

View Code

属性操作：attr和prop的区别

是否可见是否可见attr和prop

View Code

实例之全反选

View Code

实例之模态对话框

    
          Title

View Code

5： jQuery节点的增删改查

内部插入

$("").append(content|fn)      ----->$("p").append("Hello");$("").appendTo(content)       ----->$("p").appendTo("div");$("").prepend(content|fn)     ----->$("p").prepend("Hello");$("").prependTo(content)      ----->$("p").prependTo("#foo");

ppp

View Code

外部插入

$("").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

View Code

6：css操作

CSS        $("").css(name|pro|[,val|fn])    位置        $("").offset([coordinates])        $("").position()        $("").scrollTop([val])  //设置或获取滚轮的高度        $("").scrollLeft([val])    尺寸        $("").height([val|fn])  //获取或设置content的高度        $("").width([val|fn])  //获取或设置content的宽度        $("").innerHeight()  //包含了padding        $("").innerWidth()        $("").outerHeight([soptions]) //包含padding和border 设置为 true 时，计算边距在内。        $("").outerWidth([options])

实例返回顶部

View Code

7：事件

页面载入    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)

View Code

8：动画效果

显示和隐藏 show、hide

    
          Title    
      
       hello

View Code

滑动 slideUp 、slideDown

View Code

淡入淡出 [根据颜色的深浅来]。fadein、fadeout、

    
          Title

View Code

回调函数

    
          Title    
      
       hello

View Code

9：扩展方法 (插件机制)

Title

111

222

333

View Code

10：轮播图