首页 > 代码库 > jQuery的简单笔记

jQuery的简单笔记

html css javaScript Ajax jQuery Java servlet jsp jdbc mysql oracle
struts spring hibernate jdpm tomcat jUnit Ant Hadoop linux unix
android sql server

jQuery的简单笔记
//使用JQuery输出
    /*
     * jquery对象:需要用"$"来修饰
     *
     * jquery获取页面标签:$()来包裹,通过"#id"来获取
     *
     */
 //dom转化为JQUery对象  $(DOM对象)
  var username = document.getElementById("username");
 
  var $username = $(username);
 
  alert($username.val());
<script language="JavaScript">
   //JQUERY对象转化为DOM对象
   
   //方法一:jquery对象是一个数组对象,获取利用索引值进行转换成DOM对象
   var $username = $("#username");
   
//   var username = $username[0];
//   
//   alert(username.value);
   
   //方法二:在jquery中,提供了一个get(index)方法,get()中传入索引值,来进行转换成DOM对象
   
   var username = $username.get(0);
   
   alert(username.value);
   
   /*
    * DOM对象与Jquery对象可以相互转换
    *         * Jquery对象不能使用DOM对象的属性和方法
    *         * DOM对象不能使用jquery对象的属性和方法
    */
       
  </script>

<script language="JavaScript">
        //<input type="button" value="http://www.mamicode.com/改变 id 为 one 的元素的背景色为 #0000FF"  id="b1"/>
        //document.getElementById("b1").onclick = function(){}
        $("#b1").click(function(){
            /*
             * css(name,value)
             *         * 改变标签的样式
             *         * name:属性名称,对应要到css帮助文档中查找对应的名称
             *         * value:属性的值
             */
            $("#one").css("background","#0000FF");
        });
        
        
        //<input type="button" value="http://www.mamicode.com/改变元素名为

的所有元素的背景色为 #00FFFF"  id="b2"/>
        $("#b2").click(function(){
            $("div").css("background","#00FFFF");
        });
        
        //<input type="button" value="http://www.mamicode.com/改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"/>
        $("#b3").click(function(){
            $(".mini").css("background","#FF0033");
        });
        
        //<input type="button" value="http://www.mamicode.com/改变所有元素的背景色为 #00FF33"  id="b4"/>
        $("#b4").click(function(){
            $("*").css("background","#00FF33");
        });
        
        //<input type="button" value="http://www.mamicode.com/改变所有的元素和 id 为 two 的元素的背景色为 #3399FF"  id="b5"/>
        $("#b5").click(function(){
            //多个选择器并列使用,用","隔开
            $("span,#two").css("background","#3399FF");
        });

</script>

jQuery的简单笔记