jquery 学习 第一天

定位元素 :
 原则 :标记为 class 对应 . 标记为 id 对应 #

 $(); 如果不带任何标记 表示所有的元素,带. 找到 class 相等的元素,带# 找到
 id 相等的元素
 同一元素内部多标记之间写在一起,如 $("p#p2") $("input:button#b2")
 不同元素内部多标记用 空格 或 > 分开 如 $("#div p") $("#di>p")

方法:
添加元素
append --appendTo    --- after 
append  appendTo 插入到元素里面,但是 "位置相反"
after 插入到元素外面

同时 before 与 after 相反
clildren  每一个元素的所有唯一子元素的元素集合,当有多个元素的时候,默认取第一个,除非显示指定children("#a"),里面的用法
和以前一样。
clone()  克隆匹配的元素
contains 刷选元素,留下匹配的元素。---好像不能用了。empty 删除所有匹配的元素,与contains 相对。
each 遍历元素 ,
$.each 遍历元素,包括对象和数据,范围比 each 广。

end 结束当前操作,返回上一个操作  $("#divs").find("#pa").end().css("background","#33ccdd");如 设置的是divs的背景色,
并不是 pa 的背景色


animate 动画

attr 得到元素的属性值,设置元素的单个属性值,设置元素的多个属性值
原则:如果是单个属性 属性名和方法都要用“”引用起来,2者之间 用,
 如果是多个属性,首先用{ } 把整个包起来,然后 值用 “ 引用起来,
属性与值之间用:属性与属性之间用, 如果两个属性相同,后面的值,将替换前面的值。

值可以是具体的值,也可以是函数,或者方法。可以调用其他元素的属性,如果调用自己的属性 可以用 this 简写

bind 是老大  click,blur,change,dblclick,error
其中这里提供了一个很重要的概念,事件处理函数 返回false 阻止浏览器的行为,假如我点击一个超链接,并不转发页面

 

browser 检查浏览器设置

css 得到样式,设置样式, 规则和 attr 一摸一样。


-========================

$(document).ready(function(){

        alert("开始");
        /*$ 用法 */
       //$("<span>HELLO<span>").appendTo("#e");   //添加动态创建一个HTML元素
       //$("#s").appendTo(".d");                  //添加已有的HTML 标记

        /*$("love").appendTo(".d"); */           //添加一个字符串,错误 !

        //$("#di").hide();
        //$("#di>p").hide();
        //$("#di p").hide();                   //3种效果是一样的。

        //$("div p").hide();
        //$("div>p").hide();                    //2种效果是一样的。

        //$(document).find("div p").hide();
        //$(document).find("div> p").hide();

        //$(document).find("#di>p").hide();
        //$(document).find("#di p").hide();
        //$(document).find("#di").hide();        //5种方法与上面5种方法相同

        //$("input").hide();
        //$(document).find("input").hide();
        //$("#t1").hide();
        //$(".t2").hide();                       //其他元素的用法与上相同,主要是针对 class 和 id 来确定元素
       
        //$(document.body).css("background","#33ccdd"); //设置页面的背景
        //$(document.body).hide();                 //隐藏页面上所有的文本标记-=--
        //$(form1).hide();                 //隐藏页面上所有的元素
        //$(form1.elements).hide();        //隐藏页面上所有的元素,和上面一样
       
        //$("input:button").hide();        //隐藏 input 为 button 的元素
        //$("input:button#b2").hide();       //隐藏 input 为 button 并且 id 为b2 的元素
        //$("input:button.b").hide();       //隐藏 input 为 button 并且 class 为b 的元素
        /* Class----------. ; id-----------# */
        /*关于 add 用法不清楚*/
        //$("p").addClass("pse");             //对应的CSS属性为 .
        //$("#p2").addClass("pse2");
        //$(".p1").addClass("pse2");
        //$("p.p1").addClass("pse2");
        //$("p#p2").addClass("pse2");
        //$(document).find("#p2").addClass("pse2");
        //$(document).find(".p1").addClass("pse2");
       
        //$("#divs #pa").addClass("pse2");
        //$("#divs p#pa").addClass("pse2");
        //$("#divs>p#pa").addClass("pse2");
        //$("#divs>p#pa").after("<span>HELLO<span>");
        //$("#divs>p#pa").after($("#t1"));
        //$("#divs>p#pa").after("<p>three</p>");
        
         //$("#pa").after("#t1");          //插入到元素外面
         //$("#t1").appendTo("#pa");    //插入到元素里面
        
         /*
         定位元素 :
         标记为 class 对应 . 标记为 id 对应 #
         $(); 如果不带任何标记 表示所有的元素,带. 找到 class 相等的元素,带# 找到
         id 相等的元素
         同一元素内部多标记之间写在一起,如 $("p#p2") $("input:button#b2")
         不同元素内部多标记用 空格 或 > 分开 如 $("#div p") $("#di>p")
         方法:
         appendTo     after
         功能上一摸一样,只是appendTo 插入到元素里面,after 插入到元素外面
         */
//       $("#p3").animate({
//         height: 'toggle', opacity: 'toggle'
//       }, "slow");
         
//       $("#p3").animate({
//              left: 50, opacity: 'show'
//       }, 500);
         //$("#p3").css("color","red");
        
         //$("<span>HELLO<span>").appendTo("#p3");
         //alert($("#p3").attr("id"));
         //$("#p3").attr("style","color:red;color:blue");
         //$("#p3").attr({style:"color:red",style:"font-weight:bold"});
       
         //$("#p3").attr("style","color:red;font-weight:bold");
        
         //$("img").attr("title",function(){return $("img").attr("src")});//返回相对路径
        
          //$("img").attr("title",function(){return this.src }); //返回绝对路径
        
         //$("img").attr("title","${this.src}");   //已经不能用了
        
         //$("#p3").bind("click",function(){alert("dd");});
        // $("#a1").click(function(event){ event.preventDefault();});
         //$("#a1").click(function(){ return false;});
          
           //$("#t1").blur(function(){alert("ddd");});
           //$("#t1").blur();
          //alert($("#divs").children().attr("id"));
         // alert($("#p3").clone().attr("id"));
        
          //$("#p3").clone().appendTo("#p1");// 元素标记相同,看不出效果
          //alert($("p").contains("A"));
          //$("img").each(function(i){this.src="test"+i+".jpg"})
//          var a=[8,96,5,3];
//          $.each(a,function(i,n){alert(i+"-"+n)})

           // $("p").empty();
          // $("#divs").find("#pa").end().css("background","#33ccdd");
         
          //$("p").eq(1) //不懂什么意思,也最好不要用。
        
       
})

posted on 2007-12-05 08:21 top15from_old1 阅读(...) 评论(...) 编辑 收藏

导航

公告

随州简爱保罗定制衣柜专卖店为您准备了全套家装所需的定制家具,用工厂直销的价格和衣柜行业领导品牌的实力恭候您的光临。 随州市清河路清河丽景大门右侧18307228966 0722-3594778