很久没有写博客了,可以说因为工作忙得关系和知识需要累计到一定程度才写,好吧,话不多说,let;s Do。
JQuery库文件引入:
1、在使用Jquery时,JQuery库文件必须放在第一位,否则引用不了JQuery库文件。
如:
<script type="text/javascript" src="jquery-2.1.1.min.js"></script> //首先引入JQ库文件
<script type="text/javascript" src="js.js"></script> //之后再引入自己编写的JS文件
-----------------------------------------------------------------------------------------------------------------------------------------
JQuery基本选择符:
选择符 css样式 JQuery 说明
标签名 p{} $("p") 取得文档中所有段落
ID #some-id{} $("#some-id") 取得文档中ID为some-id的一个元素
类 .some-class{} $(".some-class") 取得文档中class为some-class的所有元素
子元素选择符号">":
如:
$("#selected-plays > li") //表示查找ID为selected-plays的子元素(>)中的所有li
否定式伪类选择符":not()":
如:
$("#content li:not(.hh)").addClass("sub-level");
//查找ID为content的元素的后代元素li(#content li)为基础,查找这些li中没有包含类hh(:not(.hh))的li元素
属性选择符:
1、选择带有alt属性的所有图像元素: $("img[alt]")
2、选择具有href属性且该属性已java开头的链接:$("a[href^='java']")
3、选择所有带有href属性且以mailto:开头的链接:$("a[href^='mailto:']")
4、选择所有带有href属性且已.pdf结尾的链接:$("a[href$='.pdf']")
5、属性选择符可以组合使用,选择所有带有href且已http开头且任意位置包含henry的所有链接
$("a[href^='http'][href*='henry']")
自定义选择符:
1、选择带有horizontal类的div中的第二个(因javascript数组从0开始的编号方式,所以第二项为1):
$("div.horizontal:eq(1)") //div和horizontal之间不要有空格
2、选择基数行(:even),选择偶数行(:odd),这是为什么呢,因为javascript内置从0开始的编号方式,所以第一行为0,第二行为1,以此类推:
$("tr:even") //选择单数行 $("tr:odd") //选择双数行
3、这个选择符相对于元素的父元素而非当前选择元素来计算位置,它可以接受数值,even和odd作为参数,同时,这是JQ中唯一从1开始计算的选择符:nth-child(num || even || odd)
$("tr:nth-child(odd)") //全部单数行
基于上下文内容选择元素::contains(content);
该选择符是区分大小写的;
如:$("td:contains(Henrry)")不同于$("td:contains(henrry)")
基于表单的选择符:
选择符 匹配 例子
:input 输入字段、文本区、选择列表和按钮元素 $("input[type='text']")
:button 按钮元素或者type属性值为button的输入元素 $("button") 适用于<button>标签
:enabled 启用的表单元素 $("input:enabled") || $("input[type='text']:enabled")
:disabled 禁用的表单元素 $("input[disabled='disabled']") || $("input:disabled") || $("input[type='text']:disabled")
:checked 已勾选的表单元素 $('input[type="radio"]:checked')
:selected 选择的选项元素 $("option:selected")
添加和删除css样式:
addClass(),为选择的页面元素添加css样式,这个方法唯一的参数就是要添加的类名。
removeClass(),为选择的页面元素删除css样式。
如:
<head>
<style type="text/css">
.colorRed{color: #f00;} //定义一个类的样式,设置字体颜色为红色
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> //先引入JQ库文件
<script type="text/javascript">
$(function(){
$("p").addClass("colorRed"); //使用addClass()方法为p标签添加类colorRed。
});
</head>
<body>
//字体颜色改为红色
</body>
-----------------------------------------------------------------------------------------------------------------------------------------
如:
<head>
<style type="text/css">
.colorRed{color: #f00;} //定义一个类的样式,设置字体颜色为红色
</style>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> //先引入JQ库文件
<script type="text/javascript">
$(function(){
$("p").removeClass("colorRed"); //使用removeClass()方法为p标签移去类colorRed。
});
</head>
<body>
//字体颜色改为黑色
</body>
执行函数$(document).ready(function(){do something;});
1、使用该方法JQuery支持我们预定在DOM加载完毕后调用某个函数,不用等待页面中的图片加载完;
2、多次调用该方法并按照调用顺序执行;
如:
function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}
$(document).ready(addHighlightClass);
------------------------------------------------------------------------------
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});
//ready()这个方法也可以接受一个匿名函数。这个方法特别适合传递不被重用的函数