JavaScript的基本操作（一）

　　JavaScript中有大量的方法可供我们使用，详情可参考：http://jquery.cuishifeng.cn/这也同时导致我们不可能去记住每一个的用法，且开发者每天都在新添更多的方法，所以要想掌握所有方法并不是那么容易。我在学习的过程中也很头疼，不知道从何下手，下面是我学习之后的一些心得，希望可以帮助更多的人去掌握重点，更好的理解JavaScript。

　　第一部分是元素的查找，这是我们在执行操作前的必经之路，如果找不到该元素，谈何而来的对其操作。所以是前提更是基本。很重要。

　　之前在DOM的博客中已经介绍了基本的用DOM方式的元素操作，DOM v1:直接在标签中绑定。DOM v2:document.getElementById()。DOM v3:addEventListener();

　　这里不再对其进行赘述，现在对JavaScript的相关查找方式进行总结：

　　　　第一个是要介绍选择器，JavaScript官方定义：选择器允许您对元素组或单个元素进行操作。

　　　　　　1.id 　　　　 $('#i1') 对id进行定位

　　　　　　2.class　　　$('.c1') 对类名进行定位

　　　　　　3.tag　　　　<div><a href='...'>asd</a></div>     $('a') 查找对应的标签

　　　　　　4.combo　　$('a,.c2,#i10')用逗号隔开，把所有的a,c2,i10都找到，取并集

　　　　　　5.differ　　　$('.c2 a')用空格隔开，找c2子子孙孙中的a　　$('.c2>a')大于号，只找到儿子（找一层）

　　　　　　6.selector　　:first　　:last　　:eq(index)索引位置要先测一下再来用　　:gt(index):大于　　lt(index)小于

　　　　　　7.attribute　　:自定义属性，查找具有该属性的所有标签$('[special_attribte=xxx]')用中括号[]筛选具有special_attribte=xxx的所有标签

　　　　　　8.form　　　　:input　　$(':text')=$("input[type='text']")用分号找到input中所有text类；

　　　　第二个要介绍的就是筛选器，对选择权选择出来的数据进行筛选。

                　　1.$(this).next() 进行下一个筛选
                   　　 　　--nextAll()

　　　　　　　　　  --nextUntil()
                　　2.$(this).prev() 进行上一个筛选
                  　　　　  -- prevAll()

　　　　　　　　     --prevUntil()
               　　 3.$(this).parent() 进行父级筛选
                    　　　　--parents()找所有父级直到祖宗

　　　　　　　　　  --parentsUntil()找到对应值为止
               　　 4.$(this).children() 进行子级筛选
               　　 5. $(this).siblings() 进行兄弟级筛选
                　　6.$(this).find()子子孙孙找
                　　7.$(this).eq(1) 找索引值为1的内容
                　　8.hasclass(class)

　　　　以上是主要的元素选择功能，下面介绍对所选择的元素进行的操作：

1. 1. 文本操作
      
      1. $().text()提取，如果括号里有内容则是对元素内容进行设置
      2. $().val()提取，此方法跟text的用法相同，区别则在于text是取的是<div>text</div>中的text，而value是指<input value=.....>那一类别。如果不知道该用哪一种可以先行调试。
   2. 样式操作
      
      1. addClass()
      2. removeClass()
      3. toggleClass() 类切换效果,如果有则删除,没有则添加$selector.toggleClass(class,switch)如果有了switch则只能根据其布尔值而进行添加或删除操作
   3. 属性操作
      1. $('...').attr()　　传一个参数是对标签中的属性进行操作，传两个参数是新增属性removeAttr()删除属性
      2.  $('...').prop()    property是专用于checkbox和radio的,$('...').prop('checked') 返回True/False，设置$('...').prop('checked',false)
   4. 文档处理
      
      1. append()---prepend()    适用于div类
      2. after()---before()            适用于input类（value不再标签间的）
      3. remove 　　                 删除某一行
      4. empty                            清空某一行，但保留结构
      5. clone　　                      克隆
   5. CSS操作
      
      1. $('#i1').css('样式名称','样式值')
   6. 转换操作
      
      1.  jQuery对象[0] ==>DOM对象
      2. DOM对象       ==>$(DOM对象)
   7. 位置操作
      
      1.             $(windows).scrollTop() 获取滚动条
                     $(windows).scrollTop(0) 设置滚动条
                     scrollLeft跟Top用法一样
      2.             offset().left
                     offset().top 获取指定标签在html中的坐标离最近的position：relative
         
         
         1. 　　            position()
                        <div style="position: relative">    //会找到这一层
                            <div>
                                <div id='i1' style='position:absolute;'></div>
                            </div>
                        </div>
      3.             $('#i1').height()           #纯高度
                     $('#i1').innerHeight()      #padding+纯高度
                     $('#i1').outerHeight()      #padding+border+纯高度
                     $('#i1').outerHeight(true)  #padding+margin+border+纯高度
   8. 事件操作
      
      1.                 $().click()
                         $().bind('click',function)
                         $().unbind('click',function)
      2.                 $().delegate('a','click',function//委托的方式,在click时才会执行,而其他两种会在程序写好的时候就绑定好,此方法适用于会对程序的绑定部分有所修改的情况
                         $().undelegate('a','click',function
      3.                 $().on('click',function)
                         $().off('click',function)
                         对a标签绑定的优先,即先执行绑定内容,然后才会执行a标签中的href跳转,且是在返回值为true的情况
      4.             　阻止事件：return false
                        1  当页面框架加载完毕后自动运行，默认执行的操作，这样会使网站加载速度更快（如果有大图的话）、
                        2  把js插件装进自执行里面可以避免全局变量冲突的问题
   9.  jQuery的自定义扩展：
      1.  $.extend({
                             'xxx':function(){
                                 return 'good';
                             }
                         })
      2.  $.fn.extend
         
         　　

　　　　　　

转载于:https://www.cnblogs.com/BigJ/p/7517636.html