jQuery基本使用

操作标签

jQuery代码查找标签绑定的变量名推荐使用 $xxxEle

#样式类操作
    addClass();// 添加指定的CSS类名。
    removeClass();// 移除指定的CSS类名。
    hasClass();// 判断样式存不存在
    toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加
    
#css样式操作
	jQuery对象.css('属性名','属性值')
	$divEle.css('border','5px solid black')

位置

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
$(".c1").offset(); #{left: 200, top:200}
可以自定义：$(".c1").offset({left: 400, top:100}); 


$(window).scrollTop()  获取左侧滚动条距离顶端的位移量
"""
实时监测距离
	$(window).scroll(function () {
        if($(window).scrollTop() > 600){
            alert('超过600了 架不住了')
        }
    })
"""

文本值操作

.html()

# jQuery								DOM
  text()								innerText
  html() 								innerHTML
  val() 								value
  转js对象								files
'''不写值就是获取 写了就是设置'''

属性操作

$('div').attr('style')  # 获取第一个标签的style属性值
$('div').attr('class','c1')  # 批量设置单个
$('div').attr({'name':'jason','pwd':123})  # 批量设置多个
$('div').removeAttr('class')  # 批量移除

"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
	prop('checked')		  	 结果是布尔值
	prop('checked',false)    动态设置
"""

文档处理

# 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
# 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
# 清空内容
$('body').empty()

jQuery事件操作

#绑定事件
    jQuery对象.click(function(){})
    jQuery对象.change(function(){})

    ...hover(function(){...})
    ...blur(function(){...})
    ...focus(function(){...})
    ...keyup(function(){...})

    .off( events [, selector ][,function(){}])  # 移除事件
    
    
#克隆操作
    <button id="d1">是兄弟就来砍我!!!</button>
      <script>
            $('#d1').click(function () {
            // $('body').append($(this).clone())  // 不克隆事件
            $('body').append($(this).clone(true))  // 克隆事件
            })
      </script>
    // 括号里为true时可以克隆对象的属性，反之则没有
    
#悬浮事件
    $('#d1').hover(function () {alert(123)})  // 悬浮操作

    需求：鼠标悬浮上去和移开各自触发一次
    如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
    $('#d1').hover(
      function () {alert(123)},  // 悬浮触发
      function () {alert(123)}  // 移走触发
    )

#值监听事件
    """
    jQuery绑定事件有两种方式
        $('#d1').click(function(){})
        $('#d1').on('click',function(){})  动态的
    有时候第一种绑定事件的方式无法生效 那么就使用第二种
    """
    <input type="text" id="d1">
    <script>
        $('#d1').on('input',function () {
            console.log($(this).val())
        })
    </script>	
    
#阻止后续事件
    如果给已经有事件的标签绑定事件,那么会依次执行
    如果想要取消后续时间的执行,可以使用两种方式阻止
    方式1：（推荐使用）
    $('#d1').click(function () {
         alert(123)
         return false  //  取消当前标签对象后续事件的执行
        })
    方式2：（自带关键字）
        $('#d1').click(function (e) {
                alert(123)
                e.preventDefault()
        })

#事件冒泡
    """
    在多个标签嵌套的并且都有相同事件的情况下,会出现逐级汇报的现象,就是事件都会被触发
    """
    # 解决方法
    方式1:
        return false
    方式2:
        e.stopPropagation()

jQuery动画效果

#基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
#滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
#淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
#自定义
animate(p,[s],[e],[fn])