JQuey学习笔记

官网: www.jquery.com
demo: www.jq22.com
百度静态资源库: http://cdn.code.baidu.com/       常用插件连接如bootstrap等

1.JQuery:   导库文件:jquery-3.1.1.min.js
   优点:1.对js做了封装,屏蔽浏览器之间的差异
              2.书写简便,写的更少,做的更多
              3.对ajax做了封装
   页面中优先执行jquery(比onload先执行),并且不会被覆盖
   页面加载完执行:
      a.$(function(){ alert("jqqq")  }; );
     b. $( document ).ready( function (){  alert( "jquery03" );  });

2.js与jquery获取元素区别
   var jsGet=document.getElementById("uname").value;
   var jqGet=$("#uname").val();  
    var divText=$("#uname").text();           //jq获取div文本
   var divText=document.getElementById("uname").innerText;   //js获取div文本
    var divHtml=$(" #uname ").html();          //jq获取html             
    var divHtml=document.getElementById("uname").innerHTML;      //js获取html 
    $(" #uname ").html("<h3>文本</h3>");     
    document.getElementById("uname").innerHTML="<h4>文本</h4>";  

   var html01=document.getElementById("sss").attributes["id"].value;  
   var html02=$("#sss").attr("id");  
    $(" #uname ").attr("id");        //获取id属性
    $(" #uname ").attr("id","div02");   //设置id属性,div02       

3 .JQ转JS:  转成JS后可以调用JS的方法和属性
   1.[0]下标获取
         var tojs=$("#uname") [0] ;
         alert(tojs.value);
   2.get方法获取
         var tojs02=$("#uname") .get( 0) ;
         alert(tojs02.value);
  JS转JQ:可以使用JQ的方法和属性
    1.var tojq=$(document.getElementById("unameId"));

4.选择器:css中的选择基本都可以使用
     //选择id
     $("#id");  
    //类选择            
     $(".class").css("background-color","red");     //修改样式
    //元素选择
     $("div").css("background-color","red");
    //全部选择
     $("*").css("background-color","red");
    //组合选择 
    $("#mid,h2").css("background-color","aqua");    //选取id为mid和h2
    //包含选择
    var mcontain=$("#mid h2").css("background-color","aqua");   //选取mid的h2
   //子包含
    $( "#mid>h2" ). css ( "background-color" , "aqua" );    // 选取mid的 h2
   //选择下一个同级元素(元素类型要相同)
    $( "#mid+div" ). css ( "background-color" , "aqua" );    
  //选择当前元素下所有同级元素
  $( "#mid~div" ). css ( "background-color" , "aqua" );

5.修改样式属性:
  a)对象.css("样式","样式的值");
      $( ".class" ). css ( "background-color" , "red" ); 
   b)对象.addClass("mclass");
     $(".class").addClass("myclass");
     .myclass{
          width:100px;
     }
     $(".class").removeClass("myclass other");     //移除myclass 和other样式
     $(".class").toggleClass("myclass");           //切换样式

6.操作dom节点:
  //添加节点 
    var old=$("#oid");
    var var01=   $("<li title='pingguo'>苹果</li>");
    old.append(var01);
  //移除节点
     old.remove();              //移除全部        
  //移除子节点
     old.empty()         
  //复制节点
     $("#old  li").click(function(){
          $(this).clone().appendTo(old);      //复制追加到old节点之下
     });
  //替换
      $("#appleId").replaceWith("<li>orange</li>");

7.事件绑定:
   //单个事件绑定 
      $(function(){
        $("#mid02").bind("click",function(){
            $("#mid02").css("color","red");
        });
    });
  $("#mid02").show();     //显示元素
    //多个事件绑定
$(function(){
        $("#mid02").bind("click",function(){
            $("#mid02").css("color","red");
        }).bind("mouseenter",alertInfo=function(){
            alert("aaaa");
        });
    });
//取消绑定
function ubindss(){
      $("#mid02").unbind("mouseenter", alertInfo );       //动态取消绑定 alertInfo
  }  

8.动画效果:
   $("#div01").show(3000); //3秒显示  
   $("#div01").hide(3000);  //3秒隐藏
   $("#div01").slideDown();  //从上到下3秒显示
   $("#div01").slideUp();    //从下到上3秒显示
   $("#div01").fadeIn();    //淡入,慢慢加载进来
   $("#div01").fadeOut(); //淡出

9.左边移动到右边
   $(function(){
            $("#btnRight").bind("click",function(){
                var toR=$("#sel002");
                $("#sel001 option:selected").appendTo(toR);      //选项被选中
           });
        });  

10. jquery底层原理
      jquery底层是一个闭包(匿名自调用函数)
      格式:  
               (function(形参){
                           alert(形参);  
                  })(实参);
                function(num){
                           alert(num);
                  }(123);
          为什么使用$作为开头:window.jQuery=window.$=JQuery;
         
11. $(this)this关键字在Jquery区别
// this其实是一个Html 元素。能调用元素属性,例如this.id,this.value。
// $this 只是个变量名,加$是为说明其是个jquery对象。$(this)能调用jquery的方法,例如click(), keyup()。
// 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值