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)
})