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. $().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

秒客网

JavaScript的基本操作（一）

相关文章