首页 > 其他分享> 文章详细

jq的强大属性

2021-09-16 11:33:35 阅读：149 来源： 互联网

标签：index 强大元素 jq li div 选择器属性

时隔一周，我们今天又学习了jQuery了，它是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 &lt; 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)
})</code></pre>`</div><p></p></span></div><div class="ContentItem-time"><a target="_blank" href="//zhuanlan.zhihu.com/p/410777539"><span data-tooltip="发布于 09-15 21:02">发布于 14 小时前</span></a></div><div class="ContentItem-actions RichContent-actions"><span><button aria-label="赞同 0 " type="button" class="Button VoteButton VoteButton--up"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--TriangleUp VoteButton-TriangleUp" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M2 18.242c0-.326.088-.532.237-.896l7.98-13.203C10.572 3.57 11.086 3 12 3c.915 0 1.429.571 1.784 1.143l7.98 13.203c.15.364.236.57.236.896 0 1.386-.875 1.9-1.955 1.9H3.955c-1.08 0-1.955-.517-1.955-1.9z" fill-rule="evenodd"></path></svg></span>赞同</button><button aria-label="反对" type="button" class="Button VoteButton VoteButton--down"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--TriangleDown" fill="currentColor" viewBox="0 0 24 24" width="10" height="10"><path d="M20.044 3H3.956C2.876 3 2 3.517 2 4.9c0 .326.087.533.236.896L10.216 19c.355.571.87 1.143 1.784 1.143s1.429-.572 1.784-1.143l7.98-13.204c.149-.363.236-.57.236-.896 0-1.386-.876-1.9-1.956-1.9z" fill-rule="evenodd"></path></svg></span></button></span><div class="ContentItem-action css-0"><button type="button" class="Button Button--plain Button--withIcon Button--withLabel"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--Comment Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M10.241 19.313a.97.97 0 0 0-.77.2 7.908 7.908 0 0 1-3.772 1.482.409.409 0 0 1-.38-.637 5.825 5.825 0 0 0 1.11-2.237.605.605 0 0 0-.227-.59A7.935 7.935 0 0 1 3 11.25C3 6.7 7.03 3 12 3s9 3.7 9 8.25-4.373 9.108-10.759 8.063z" fill-rule="evenodd"></path></svg></span>添加评论</button></div><div class="Popover ShareMenu ContentItem-action"><div class="ShareMenu-toggler" id="Popover63-toggle" aria-haspopup="true" aria-expanded="false" aria-owns="Popover63-content"><button type="button" class="Button Button--plain Button--withIcon Button--withLabel"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--Share Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M2.931 7.89c-1.067.24-1.275 1.669-.318 2.207l5.277 2.908 8.168-4.776c.25-.127.477.198.273.39L9.05 14.66l.927 5.953c.18 1.084 1.593 1.376 2.182.456l9.644-15.242c.584-.892-.212-2.029-1.234-1.796L2.93 7.89z" fill-rule="evenodd"></path></svg></span>分享</button></div></div><button type="button" class="Button ContentItem-action Button--plain Button--withIcon Button--withLabel"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--Star Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M5.515 19.64l.918-5.355-3.89-3.792c-.926-.902-.639-1.784.64-1.97L8.56 7.74l2.404-4.871c.572-1.16 1.5-1.16 2.072 0L15.44 7.74l5.377.782c1.28.186 1.566 1.068.64 1.97l-3.89 3.793.918 5.354c.219 1.274-.532 1.82-1.676 1.218L12 18.33l-4.808 2.528c-1.145.602-1.896.056-1.677-1.218z" fill-rule="evenodd"></path></svg></span>收藏</button><button type="button" class="Button ContentItem-action Button--plain"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--Report" fill="currentColor" viewBox="0 0 24 24" width="14" height="14"><path d="M19.947 3.129c-.633.136-3.927.639-5.697.385-3.133-.45-4.776-2.54-9.949-.888-.997.413-1.277 1.038-1.277 2.019L3 20.808c0 .3.101.54.304.718a.97.97 0 0 0 .73.304c.275 0 .519-.102.73-.304.202-.179.304-.418.304-.718v-6.58c4.533-1.235 8.047.668 8.562.864 2.343.893 5.542.008 6.774-.657.397-.178.596-.474.596-.887V3.964c0-.599-.42-.972-1.053-.835z" fill-rule="evenodd"></path></svg></span> 举报</button><div class="Popover ContentItem-action"><button aria-label="更多" id="Popover64-toggle" aria-haspopup="true" aria-expanded="false" aria-owns="Popover64-content" type="button" class="Button OptionsButton Button--plain Button--withIcon Button--iconOnly"><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--Dots Button-zi" fill="currentColor" viewBox="0 0 24 24" width="1.2em" height="1.2em"><path d="M5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill-rule="evenodd"></path></svg></span></button></div><button data-zop-retract-question="true" type="button" class="Button ContentItem-action ContentItem-rightButton Button--plain"><span class="RichContent-collapsedText">收起</span><span style="display: inline-flex; align-items: center;">&ZeroWidthSpace;<svg class="Zi Zi--ArrowDown ContentItem-arrowIcon is-active" fill="currentColor" viewBox="0 0 24 24" width="24" height="24"><path d="M12 13L8.285 9.218a.758.758 0 0 0-1.064 0 .738.738 0 0 0 0 1.052l4.249 4.512a.758.758 0 0 0 1.064 0l4.246-4.512a.738.738 0 0 0 0-1.052.757.757 0 0 0-1.063 0L12.002 13z" fill-rule="evenodd"></path></svg></span></button></div></div>

标签：index,强大,元素,jq,li,div,选择器,属性
来源： https://blog.csdn.net/csdnZHANGjf810/article/details/120325530

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9