jq的强大属性

js的类库,简单化了JavaScript它现在使用的很是很频繁,有三点原因:
1、强大的选择器机制
2、优质的隐式迭代
3、无所不能的链式编程首先是选择器id选择器

$("#id名")类名选择器   
$(".类名")标签选择器   
$("标签名")属性选择器 
$("[name='username']")伪类选择器(表单的伪类)   
$("li:first-child")$("li:last-child")
$("li:nth-child(数字)") // 第一个元素对应数字是1
$("li:empty") // 空标签筛选器基本上原理和伪类选择器一样,作用就是筛选出所需要的元素
$("li:first")
$("li:last")
$("li:event")
$("li:odd")
$("li:eq(数字)") // 选择下标是指定数字的元素
$("li:lt(数字)") // 下标小于指定数字的元素
$("li:gt(数字)") // 下标小于指定数字的元素表单元素选择器
$(":input") // 匹配所有的表单元素 包括:文本框(input)下拉列表(select)、文本域(textarea)
$(":text") // 	匹配单行文本框type="text"  
$("input:text")  
$("input[type=text]")
$(":password") // 匹配单行密码框 
$(":radio") //	  匹配单选按钮 
$(":checkbox") // 匹配多选按钮
$(":submit") //	匹配提交按钮
$(":reset") // 匹配重置按钮
$(":image") //  匹配图片按钮
$(":button") // 匹配普通按钮
$(":file") //   匹配文件上传
$(":hidden") // 匹配隐藏域表单对象选择器
$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input:checked") // 所有选中的表单元素
$("select:selected") // 被选中的下拉框元素筛选器方法
$("li").first() // 第一个元素
$("li").last() // 最后一个元素
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div下的指定元素
$("div").siblings() // div的所有兄弟元素事件on方法用于绑定事件、委托事件、传入参数   
 $(元素).on(事件类型,[委托元素],[传入的参数],处理的函数)
 off方法用于解绑事件   
 $(元素).off(事件类型,处理函数)trigger方法用于手动触发事件:    
 $(元素).trigger(事件类型)属性操作设置属性
 $("div").prop(属性名,属性值);获取属性
 $("div").prop(属性名);设置自定义属性
 $("div").attr(属性名,属性值);获取自定义属性
 $("div").attr(属性名);删除属性
 $("div").removeProp(属性名);
 $("div").removeAttr(属性名); // 删除自定义属性样式操作设置样式$("div").css(css属性名,值); // 设置一个样式
 $("div").css({ // 设置多个样式    css属性名:值,    css属性名:值})获取样式$("div").css(css属性名);类名操作
 $("div").addClass(类名); // 添加类名
 $("div").removeClass(类名); // 删除类名
 $("div").toggleClass(类名); // 在添加和删除之间切换
 $("div").hasClass(类名); // 判断元素是否有这个类名,有是true,没有是false内容操作
 $("div").text(); // 获取元素内容 === 相当于 div.innerText
$("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html("<b>文字</b>"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>"
$("input").val(); // 获取表单元素的值 === 相当于 input.value
$("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"补充的知识点$(this) 是将this关键字转为jquery对象

$(this).index() // index方法是获取元素的下标each方法用来遍历元素集合元素集合.each(i,v){ # i表示下标,v表示值
# v表示元素集合中的每一个元素
}然后用jQuery做了轮播图,js代码如下,确实要比以前写要简易很多

var index = 0
    $('a.rightBtn').click(function(){
        index++
        if(index === $('ul li').length){
            index = 0
        }
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
        return false
    })

    $('a.leftBtn').click(function(){
        index--
        if(index < 0){
            index = $('ul li').length-1
        }
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
        return false
    })

    $('ol li').click(function(){
        index = $(this).index()
        $('ul li').eq(index).addClass('active').siblings().removeClass('active').parent().next().children().eq(index).addClass('active').siblings().removeClass('active')
    })

    var timer = setInterval(function(){
        $('a.rightBtn').trigger('click')
    },100)

    $('.carousel').hover(function(){
        clearInterval(timer)
    },function(){
        timer = setInterval(function(){
            $('a.rightBtn').trigger('click')
        },100)
    })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值