JQuery选择器和JQuery库文件引入

来源：互联网发布：淘宝遇到黄牛怎么举报编辑：程序博客网时间：2024/06/08 03:17

很久没有写博客了，可以说因为工作忙得关系和知识需要累计到一定程度才写，好吧，话不多说，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>

</head>

<body>

<p>原本这些字是黑色</p> //字体颜色改为红色

</body>

-----------------------------------------------------------------------------------------------------------------------------------------

如：

<head>

</head>

<body>

<p class="colorRed">原本这些字是黑色</p> //字体颜色改为黑色

</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()这个方法也可以接受一个匿名函数。这个方法特别适合传递不被重用的函数

0 0