前端之jQuery
Posted jingandyuer
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端之jQuery相关的知识,希望对你有一定的参考价值。
$(‘#i1‘).html()==获取id=i1的元素的HTML代码,html()是JQ里的方法
上面等于 document.getElementById("i1").innerHTML;
声明对象
var $variable = jQuery对像
var variable = DOM对象
ps:$variable[0]//jQuery对象转成DOM对象
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
$(‘#id‘) id 选择器
$("tagName") 标签选择器
$(".className") 类选择器
$("div.c1") // 找到有c1 class类的div标签
$("*") 通用选择器
$("#id, .className, tagName")组合选择器
$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
层级选择器
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
实列;
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器 <input type="text"> <input type="password"> <input type="checkbox"> $("input[type=‘checkbox‘]");// 取到checkbox类型的input标签 $("input[type!=‘text‘]");// 取到类型不是text的input标签
disabled <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签
:selected <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素;
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
儿子和兄弟元素:
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
$("div").find("p")=$("div p")
搜索所有与指定表达式匹配的元素。
$("div").filter(".c1")=$("div.c1")
// 从结果集中过滤出有c1样式类的
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加
实例:css("color","red")//DOM操作:tag.style.color="red"
$("p").css("color", "red"); //将所有p标签的字体设置为红色
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
ps:1.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。
2.position()的差别在于: .position()是相对于相对于父级元素的位移。
获取html html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 文本 text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容 值 val()// 取得第一个匹配元素的当前值 val(val)// 设置所有匹配元素的值 val([val1, val2])// 设置多选的checkbox、多选select的值 案列; <input type="checkbox" value="basketball" name="hobby">篮球 <input type="checkbox" value="football" name="hobby">足球 <select multiple id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> 设置值 $("[name=‘hobby‘]").val([‘basketball‘, ‘football‘]); $("#s1").val(["1", "2"])
获取被选中的checkbox或radio的值: <label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1"> 可以使用: $("input[name=‘gender‘]:checked").val()
以上是关于前端之jQuery的主要内容,如果未能解决你的问题,请参考以下文章