码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础整理!!

时间:2018-04-17 20:50:12      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:下标   att   自己   ntb   用法   document   pen   ddd   attr   

 

 javascript    jQuery  用法  和引用顺序

 引用顺序:

 先引css再引js

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

 

用法:

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

 

 

1.找标签:

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

    jQuery$(选择器);  选择器包含id选择器,class选择器   jQuery对象

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

    //dom对象

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

    //jQuery对象

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

2.jQuery对象和js对象转换

   jQuery==js

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

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

   id值时,  这句话表示吧idbb的元素转成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>
找元素

 

jQuery基础整理!!

标签:下标   att   自己   ntb   用法   document   pen   ddd   attr   

原文地址:https://www.cnblogs.com/baobaoa/p/8869697.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!