JQuery学习之核心


<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="utf-8" />
        <title>JQtitle>
        <script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8">script>
        <style type="text/css">
            #bar{
                margin:3px; 
                width:40px; 
                height:40px;
                position:absolute; 
                left:0px; 
                top:30px; 
                background:green;
                display:none; 
            }
            #bar.newcolor{
                background: blue;
            }
        style>
    head>
    <body>
        <div class="wrap">
            <div class="div1 con">
                <div class="div11">ssdiv>
            div>
            <div class="div2 con">
                <div class="div21">sssdiv>
            div>
        div>
        <ul>
          <li id="foo">fooli>
          <li id="bar">barli>
        ul>
        <button id="stop">stopbutton>
    body>
    <script>
//1.JQ搜索元素可以接受两个参数,第一个为目标,第二个为范围,但一般都是在HTML中搜索,因此省略第二个参数
        console.log($(".div11",".div1"));
//2.JQ添加标签字段,接受两个参数,第一个为添加的标签,第二个用于附加在这个标签上的属性,内容,事件或者方法之类的。值得注意的是:第一个参数格式固定为$("") 或 $("") ,微软规定  元素的 type 只能写一次,所以创建一个  元素必须同时设定 type 属性
        $("
",{ text: "Click me!", id:'move', click:function(){ $(this).css("background","blue") } }).appendTo($(".wrap")); //3.当DOM加载完成后要执行的函数 /* * js的onload和jq的ready区别: * 1.window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 2.window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行 JQuery的ready事件实际上是对IE的readystatechange事件和DOM的DOMContentLoaded事件进行封装,这两事件都是在DOM树结构下载并解析完毕后触发。 * */ // $(document).ready(function(){})简写为下面代码 $(function(){ console.log(22) }) //4.each循环函数同for,更简洁,需要i的时候传参数i就可以使用 $(".con").each(function(i){ console.log(i) $(this).toggleClass("ex") }) //5.size()已失效,作用和length一样,报错undefined is not a function // console.log("Size: " + $("li").size()); //6.计算元素个数 console.log("length: " + $("li").length); //7.返回$()搜索元素的第一个参数,已失效 // console.log($('ul li').selector)//ul li //8.返回$()搜索元素的第二个参数,已失效 // console.log($('ul li',document.body).context) //9.从0开始,返回一个匹配的DOM对象,和eq(0)相似,不过eq()返回的是Jq对象 console.log($(".con").get(0)) //10.index()返回下标 ,从0开始 console.log($('li').index($("#foo")))//传递一个dom对象或者JQ对象,返回在原先集合中的索引位置 console.log($('#bar').index("li"))//传递一个选择器,返回#bar在所有li中的索引位置 console.log($('li').index($('li:gt(0)'))); //传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置 console.log($('#bar').index())//不给参数,返回同辈元素的位置 console.log($('baz').index())//找不到匹配的元素,则返回-1 //11.data()存取在元素上的自定义属性数据,可以是单个或集合 $('#bar').data('test',{'first':'sss','second':'eee','third':'www'}) console.log($('#bar').data('test').third) $('#bar').removeData('test')//删除属性无法删除集合里的单个属性 console.log($('#bar').data('test')) //12.函数队列的问题,防止动画过多回掉函数一层一层的,太复杂。 /*没定义队列名,默认为fx,动画函数放在fx队列中,然后在以先进先出的方式执行队列中的函数,非动画函数优先动画函数执行, */ /*queue(name,[callback]): 当只传入一个参数时, 它返回并指向第一个匹配元素的队列(将是一个函数数组,队列名默认是fx);$('#demo').queue('name') 当第二个参数是一个函数时, 它将在匹配的元素的队列最后添加一个函数.$('#demo').queue('name',fun); 用queue将函数fun加入到name队列中 当第二个参数是一个函数数组时,它将匹配元素的队列用新的一个队列来代替(函数数组). */ $('#move').click(function () { $("#bar").show("slow"); $("#bar").animate({left:'+=200'},2000); //queue()将一个函数插入队列 $("#bar").queue(function () { $(this).addClass("newcolor"); //shift()取出队列中最前端的函数,并执行它。两者必须同时存在,否则无效 $(this).dequeue(); }); $("#bar").animate({left:'-=200'},500); $("#bar").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("#bar").slideUp(); }); //clearQueue([queueName])清除尚未进行的动画 $("#stop").click(function(){ $("#bar").clearQueue(); }); //出自文档http://www.cnblogs.com/rmbteam/archive/2011/07/25/2116357.html //13.jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法(通常用来制作插件) jQuery.fn = jQuery.prototype 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”,只有实例化对象后才可以使用 /* * jQuery.extend(object)扩展jQuery对象本身。 * 参考文档:http://www.cnblogs.com/xuxiuyu/p/5989743.html */ script> html>

你可能感兴趣的:(JS)