jQuery的基础使用_jQuery

一、jQuery简介

就是Dom、Bom、JS的类库

参考使用手册:

http://jquery.cuishifeng.cn/

二、jQuery的使用

1、与dom的转换

  jQuery对象[0] ==>dom对象

  $(dom对象)==>jQuery对象

2、查找元素

(1)常用选择器

 常用:

  $('#id')      //id选择器//
  $(".c1")     // calss//
  $('a')        //标签选择器//
  $("*")        //* 所有//
  $('a,.c1,#i10')    //组合选择器//

 层级: 

  $('a .c1')   #选择a标签下的所有class等于c1的标签
  $('a>c1')   #选择a标签下的儿子等于c1的标签
  $('a+c1')   #选择a标签的下一个等于c1的标签
  $('a~c1')   #选择a标签的兄弟标签等于c1的标签

 属性:

  $('[alex]') #查找出具有alex属性的标签
  $('[alex="123"]') #查找出具有alex属性等于123的标签

 再次筛选:

  $("#i1 a:first") #选择id为i1的下面的a标签的第一个标签
  常用:first,last,eq(索引)

(2)常用筛选器

  基础:

    $(this).next()  #获取下一个
    $(this).prev()   #获取上一个
    $(this).parent()    #获取父标签
    $(this).children()  #获取子标签
    $(this).siblings()   #获取所有兄弟标签
    $(this).find(#i1)    #获取子孙标签中#i1标签

  其他常用:

    eq(index|-index) #索引等于

    first()  #第一个

    last() #最后一个

    hasClass(class)  #有相关样式的

  

 3、操作元素

 (1)元素绑定事件

  $('.header').click(function(){
  console.log(this)
  })

 (2) 添加样式和移除样式

   $('#i1').addClass('hide')
   $('#i1').removeClass('hide')
   $('#i1').hasClass('hide')    #判断是否有这个样式
   $('#i1').toggleClass('hide')   #有这个样式的话就删除,没有的话添加

 (3)内容操作

  $('#i1').text()   #不加参数是获取文本内容
  $('#i1').text("值")   #加参数是赋值文本内容,不解析html内容
  $('#i1').html()    #不加参数是获取html内容
  $('#i1').html("值")    #加参数是赋值html内容,解析html内容

 (4)value值操作

  $("#i2").val()   #获取标签的values值
  $("#i2").val("值")   #设置标签的values值

 (5)属性操作

  $("#i2").attr("id") #获取属性值
  $("#i2").attr("id","i1") #赋值
  $("#i2").removeAttr("id") #删除属性

  #专门用于为input 标签的checkbox/radio的checked选中属性(1/2版本的jquery的attr处理的话会出问题)
  $("#i2").prop('checked') #获取值
  $("#i2").prop('checked',true) #设置值

  $("#i2").index() #获取索引值

 (6)文档处理

  var tag='<input type='text'>'

   $(this).append(tag)

  append   #在里面的最后添加标签
  prepend   #在里面的最前面添加标签
  after      #在下一个添加标签
  before   #在上一个添加标签

  remove    #删除标签
  empty    #清空标签
  clone   #克隆复制一份

 (7)样式处理

  $('.c1').css('color','red')  #设置样式里的某一个值

 (8)位置处理 

  滑轮:overflow
    $(windows).scrollTop() #无值得时候是获取高度
    $(windows).scrollTop(0) #有值代表设置
    $("#i1").scrollLeft() #无值得时候是获取离左边的距离
    $(windows).scrollLeft(0) #有值代表设置

  offset :指定标签在html中的坐标
    $("#i1").offset() #获取左上角像素点的位置
    常用于拖动元素在页面移动:
    $("#i1").offset().top #高
    $("#i1").offset().left #左
  position:在position的relative父标签的相对位置
    $("#i1").position() #在position的relative和absolute中的相对位置

  

  height():其高度范围是所匹配元素的高度height;
  innerheight():其高度范围是所匹配元素的高度height+padding;
  outerheight():其高度范围是所匹配元素的高度height+padding+border;
  outerheight(true)其高度范围是所匹配元素的高度height+padding+border+margin;

4、其他

 (1)默认事件

  如a标签的onclick事件
    (a)本身就有默认事件:跳转,直接再添加onclick事件。默认优先执行自己添加的事件,然后再执行默认事件(input(checkbox)的标签默认事件先执行)
    (b)设置默认事件不执行:
    return false时不执行默认事件  
    return true 执行默认事件

  dom方式控制默认事件:

  

  jQuery方式:

  

  (2)设置js脚本加载时间(默认从上到下加载)

  //页面框架加载完之后,自动执行

  $(function(){})

  应用场景:在加载图片完整之前就可以执行$(函数),而后面的需要等图片加载完成

  (3)jQuery的扩展

  

    $.extend    #调用方式:$.方法
    $.fn.extend    #调用方式:$(..).方法
    (function(arg){var status=1;})($)  # 增加插件放到自执行函数中

    

    

 (4)插件的引用

  防止全局变量冲突,放到自执行函数当中

   

猜你喜欢

转载自www.cnblogs.com/chenxiaozan/p/12726931.html