xml地图|网站地图|网站标签 [设为首页] [加入收藏]

美高梅游戏网站

当前位置:美高梅游戏网站 > 美高梅游戏网站 > JQuery 学习笔记 选择器之一

JQuery 学习笔记 选择器之一

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-09-05 00:33

通过标签名,属性名或内容对DOM元素进行选择,没有浏览器的兼容问题
选择器类型:
基本选择器
层次选择器
过滤选择器
表单选择器
基本选择器:JQuery中使用最频繁的选择器

本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^
现在,让我们一起开始在JQuery的世界里飞翔吧^^
首先,本章先来学习JQuery最基本的选择器的使用咯
先声明下,使用JQuery最基本的规则
$(document).ready(function(){
//do something
})
而在本系列文章中,采用缩写
$(
function(){
//do something
}
)
关于例子中使用的外部JS文件jquery-1.3.2.js则是使用JQuery的最基本的库文件,没有的同学可以去 这里下载也可到我CSDN的资源里去下
好咯,以下是我做测试用的HTML文件内容,大家可参考下

使用JQuery:
 $('#mydiv').css('background-color','red');
使用js:
 document.getElementById('mydiv').style.backgroundColor = 'red';
 按照JQuery的习惯,下面的代码应该改成第二种方式
element:根据给定的元素名称匹配所有元素,也就是<后边的元素名称
  $(function () {
            $('#but').click(function () {
                //$('#a1').css('background-color', 'blue');
                  $('a').css('background-color','red');
            })
        })
根据类型匹配元素:若多个元素使用的类型相同,则选择多个元素

复制代码 代码如下:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
.test{
background:red;}
--></style><style type="text/css" bogus="1"> .test{
background:red;}</style>
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript"><!--
$(
function(){
var result = $("#sResult");
$("#aFirst").click(function(){
result.html($("#oneP").html());
})
$("#aSecond").click(
function(){
result.html("");
$("form").each(function(){
result.html(result.html() + $(this).html());
})
}
)
$("#aThird").click(
function(){
result.html("");
$(".test").each(
function(){
result.html(result.html() + $(this).html());
}
)
}
)
$("#aFourthly").click(function(){
result.html($("*").html());
})
}
)
// --></script>
<title>无标题文档</title>
</head>

层次选择器

<body>
<form>
<p id="oneP">one</p> <div><p>two</p></div>
</form>
<form>
<p class="test">three</p>
</form>
<a href="#" id="aFirst">获取ID为"oneP"的HTML内容</a>|
<a href="#" id="aSecond">获取所有Form元素的HTML的内容</a>|
<a href="#" id="aThird">获取CSS样式为test的HTML的内容</a>|
<a href="#" id="aFourthly">获取页面所有HTML内容</a><br />
Result:
<div style=" border-bottom-color:#000; border:1px solid " >
<span id="sResult"></span>
</div>
</body>
</html>

 

本章讲的内容分别就是四个连接元素aFirst、aSecond、aThird、aFourthly所完成的功能
先对代码中一起不属性选择器的内容进行解释下吧
1.element.html(string content)
这个方法也是属于比较常用的功能吧
当此方法无传参数时,则用于读取当前element的纯HTML内容,如果传参进去使用时,则为修改element的HTML内容,这应该还算好理解吧^^
2.each()
此方法主要就是用于遍历element数组,比如例子中的aSecond连接,当点击aSecond时,将会遍历页面中的两个Form表单,并用.html()方法来显示每个表单的内容
课外就简单讲到这,现在该讲正题咯
1.$("#ID")
描述:此方法用于根据Element的ID来获取该元素,学过JS的人应该很容易了解此意思,就相当于JS里的document.getElementById("ID");
在例子中,就用此方法来获取ID为oneP的元素,并显示其HTML内容.
返回值:Element
2.$("TagName")
描述:此方法用于获取某种元素的的集合,相当于JS里的document.getElementsTagName("TagName").如例子中获取所有的Form表单元素集合.
返回值:Array(Element);
3.$(".className")
描述:此方法用于获取使用某个样式的元素集合,如例子中获取样式为test的元素集合.
返回值:Array(Element);
4.$("*")
描述:用于获取页面上所有的HTML,目前还不知道这个有哪些实用的地方,哈,先存着
返回值:Array(Element);
5.$("#ID,TagName,.className,...N")
描述:此方法其实就是把前四种选择器合起来一起用,以","进行分隔,返回一个元素集合,上面没例子,我就在这稍做个解释,比如要获取ID为oneP、DIV元素、样式为test的元素,即可使用$("#oneP,div,.test")。
返回值:Array(Element);

$('#divMid').css('display', 'block'):设置id为'divMid'的层可见
$('div span').css('display', 'block'):设置id为'divMid'的层里面的所有span元素可见,无论有几级嵌套
$('div>span').css('display', 'block'):设置id为'divMid'的层里面的第一级span元素可见,此span元素里面的span元素不可见

...

$('#divMid+div').css('display','block'):设置id为'divMid'的层后面的第一个div可见
$('#divMid+span').css('display', 'block'):设置id为'divMid'的层后面的第一个span可见
$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素

 $('#divMid').nextAll().css('display', 'block'):设置id为'divMid'的层后面的所有元素可见,无论是什么元素,必须与divMid平级,平级元素里面的嵌套元素不可见
$('#divMid~div').css('display', 'block'):设置id为'divMid'的层后面的所有div元素可见,必须是平级的。
$('#divMid~span').css('display','block');:设置id为'divMid'的层后面的所有span元素可见,必须是平级的。

例:

[javascript]
<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        //层次选择器  
        $(document).ready(function () { 
            $('#Button1').click(function () { 
                //$('#divfirst span img').hide(2000); //找到id为divfirst里的span元素下的img元素    
                //$('#divfirst  img').hide(2000);     //找到id为divfirst里所有的img元素  
                $('#divfirst>span img').hide(3000)    //找到id为divfirst里第一级span元素里得img元素  注意! 这个第一级是指所有divfirst下一级span元素  
                //$('#divfirst+div img').hide(3000)         //找到和id为divfirst的元素同级的第一个紧邻他的div元素 的img元素  
                //$('#divfirst~div img').hide(3000)         //找到和id为divfirst的元素同级的所有div元素 的img元素  
                //$('#divfirst').next().hide(3000); //找到和id为divfirst的元素后面的同级的第一个元素  
                //$('#divfirst').nextAll().hide(3000); //找到和id为divfirst的元素后面的同级的所有元素  
            }) 
        }) 
    </script> 

<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //层次选择器
        $(document).ready(function () {
            $('#Button1').click(function () {
                //$('#divfirst span img').hide(2000); //找到id为divfirst里的span元素下的img元素 
                //$('#divfirst  img').hide(2000);     //找到id为divfirst里所有的img元素
                $('#divfirst>span img').hide(3000)    //找到id为divfirst里第一级span元素里得img元素  注意! 这个第一级是指所有divfirst下一级span元素
                //$('#divfirst+div img').hide(3000)         //找到和id为divfirst的元素同级的第一个紧邻他的div元素 的img元素
                //$('#divfirst~div img').hide(3000)         //找到和id为divfirst的元素同级的所有div元素 的img元素
                //$('#divfirst').next().hide(3000); //找到和id为divfirst的元素后面的同级的第一个元素
                //$('#divfirst').nextAll().hide(3000); //找到和id为divfirst的元素后面的同级的所有元素
            })
        })
    </script>

[html]
<body> 
    <input id="Button1" type="button" value="button " /> 
<div id="divfirst"> 
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span> 
   <span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span> 
 
</div> 
<div> 
    <img src="风景/d159717ab855f729066b333d439f630e.jpg" /> 
第二层 
</div> 
<div> 
    <img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" /> 
第三层 
</div> 
<div> 
    <img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" /> 
第四层 
</div> 
</body> 

本文由美高梅游戏网站发布于美高梅游戏网站,转载请注明出处:JQuery 学习笔记 选择器之一

关键词:

上一篇:jQuery实现点击标题输入详细信息

下一篇:没有了