jQuery基础整理！！

Posted 2020-10-31 王保利d窝

 

 javascript    jQuery  用法  和引用顺序

 引用顺序：

 先引css再引js

 js中先引jQuery，再引jabascript，再引自己写的js

 

用法：

jQuery需要引入一个js文件，并在所有js代码之前

 

 

1.找标签：

    js： document.getElement....  包含所有的找寻代码     dom对象

    jQuery：$(选择器)；  选择器包含id选择器，class选择器   jQuery对象

    下面的两句话就代表找到id为aa的标签并给这个标签添加一个class，值为bb;

    //dom对象

        document.getElementbyId(‘aa‘).setAttribute(‘class‘,‘bb‘);

    //jQuery对象

       $(‘ddd‘).attr(‘class‘,‘bb‘);

2.jQuery对象和js对象转换

   jQuery==》js

   是class值时，  这句话表示吧class为bb的元素下标为0的转成dom对象

   $(‘.bb‘) ==》$(‘.bb‘)[0] || $(‘.bb‘).get(0)

   是id值时，  这句话表示吧id为bb的元素转成dom对象

   $(‘#bb‘) ==》$(‘#bb‘)[0] || $(‘#bb‘).get(0)

   操作jQuery下标为0的元素  要操作第几个括号里就写几

   $(‘.bb‘).eq(0);

   js ==》jQuery

    现在有一个dom对象

    var dom = document.getElementById(‘ddd‘);

    直接吧变量名给dom就把dom对象转成了jQuery对象

    $(dom)

3.操作内容  

    js: dom代表js对象

表单 ： dom.value

 非表单：dom.innethtml

 jQuery: $代表jQuery对象

        表单:  $.val();     $.val(‘修改之后的值‘);     

        非表单: $.html();   $.html(‘修改之后的值‘);    $.text() 和html的效果差不多

4.操作属性：

    js：

       操作属性：

        dom.setAttribute(属性名,属性值);

       获取属性：

        dom.getAttribute(属性名);

   jQuery:

     操作属性：

      $.attr(属性名，属性值);

     获取属性：

      $.attr (属性名)

     操作多个属性时：

      $.arrt({属性名：属性值,属性名:属性值});

5.操作样式

    js：

       操作样式

        dom.style.样式

    jQuery:

       操作样式

        $.css（属性名,属性值);

        $.css（属性名);

       操作多个属性时：

      $.css({属性名：属性值,属性名:属性值});

6.事件

    js:   添加事件

    dom. addEventListener();

    jQuery:  添加事件    点后面可以直接写事件，用什么事件写什么事件

    $.onclick(function(){

    })

<input type="checkbox" name="1">
<input type="checkbox" name="2">
<input type="checkbox" checked name="3">
<input type="checkbox" name="4">


<script>
   $(‘input[type="checkbox"]:checked‘)    
</script>

找元素