`

6月12号学习jquery（noConflict() 方法、 选择器列表）

 
阅读更多
今天的学习

1、noConflict() 方法 

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<button>测试 jQuery</button>
</body>
</html>


noConflict() 方法就是直接可以将p标签里面的内容在线上直接进行修改成jQuery("p").text("jQuery 仍在运行！");p.text里面的jQuery 仍在运行！

2、选择器列表

*号 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("body *").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
 
 
</body>
</html>


通过$("body *").css("background-color","#B2E0FF");*号代表的是所有的元素body是代表的那里的元素样式的背景颜色换成"#B2E0FF的颜色

:first 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("p:first").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
 
 
</body>
</html>


$("p:first")代表的就是第一个p标签里面的元素将背景颜色换成#B2E0FF

:last 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("p:last").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
 
 
</body>
</html>


$("p:last")将最后一个p标签的元素的背景颜色换成#B2E0FF

:even 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("tr:even").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>

<table>
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>

<td>London</td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>

<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>

<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>

</table>

</body>
</html>
 
 
</body>
</html>


$("tr:even")就将所有偶数tr标签元素的背景颜色换成#B2E0FF

:odd 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("tr:odd").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>

<table>
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>

<td>London</td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>

<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>

<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>

</table>

</body>
</html>
 
 
</body>
</html>


$("tr:odd")将所有tr标签元素的奇数的背景颜色换成#B2E0FF

:eq(index) 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("p:eq(1)").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
 
 
</body>
</html>


$("ul li:eq(1)")将ul里面的第二个li标签的元素的背景颜色换成#B2E0FF因为是从0开始计算在里面可以任意元素第几个的li标签只要里面有都能选

:gt(no) 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("tr:gt(2)").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>

<table>
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>

<td>London</td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>

<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>

<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>

</table>

</body>
</html>
 
 
</body>
</html>


$("ul li:gt(2)")将ul里面的最大的两个li标签元素的背景颜色换成#B2E0FF这里面是从0开始计算你需要从最大的多少就写多少在这个例子里面是3和4要背景颜色发生了变化

:lt(no) 

html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $("tr:lt(2)").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>

<table>
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>

<td>London</td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>

<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>

<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>

</table>

</body>
</html>
 
 
</body>
</html>


$("ul li:lt(2)")将ul里面的最小的两个li标签元素的背景颜色换成#B2E0FF从0开始所以不是1和2 是标题和1 因为在里面标题也是li标签从标题开始计算下面的才是1

:header 

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){
    $(":header").css("background-color","#B2E0FF");
});
 
</script>	
 
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
 
 
</body>
</html>


$(":header")包含了所有标题元素 <h1> - <h6>所以在这个例子里面只有<h1>的背景颜色换成了#B2E0FF
分享到：
| 个人评论
评论
1 楼 萧远山 2013-06-13  
淘宝首页的轮播效果要做好
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery插件冲突(jquery.noconflict)解决方法分享

    许多的 JS 框架类库都选择使用$符号作为函数或变量名，jQuery是其中最为典型的一个。在 jQuery 中，$ 符号只是 window.jQuery 对象的一个引用，因此即使 $ 被删除，window.jQuery 依然是保证整个类库完整性的坚强...

    WEB开发 之 jQuery - noConflict() 方法.docx

    为了解决这个问题，jQuery提供了一个名为`noConflict()`的方法。`noConflict()`的主要作用是释放`$`这个标识符，将其控制权交还给之前持有它的库或框架，或者让开发者可以自由地重新分配`$`的用途。这样，其他框架...

    jQuery noConflict() 方法用法实例分析

    本文实例讲述了jQuery noConflict() 方法用法。分享给大家供大家参考，具体如下： jQuery – noConflict() 方法 如何在页面上同时使用 jQuery 和其他框架？ 要解决这个问题，只需要使用jQuery中的noConflict()方法，...

    jQuery中noconflict函数的实现原理分解

    jQuery中，noconflict是用来防止变量冲突，用来释放变量控制权的一个重要方法。我们知道，jQuery中对外提供有两个全局变量，$和jQuery，虽然jQuery只产生了两个全局变量，极少情况下才会出现冲突，但是如果网页中...

    jQuery中noConflict()用法实例分析

    jQuery中的`noConflict()`方法就是为了避免这种情况而设计的。 `$`在jQuery中通常被用作快捷方式来调用jQuery对象，但它本质上是`window.jQuery`的一个引用。`jQuery.noConflict()`的主要作用就是释放`$`这个符号，...

    从零开始学习jQuery

    jQuery设计时考虑了与其他JavaScript库共存的问题，使用`.noConflict()`方法可以释放$符号，避免与其他库冲突。 十、最佳实践与性能优化 学习jQuery的同时，也要了解如何编写高效代码。避免使用全局变量，合理利用...

    锋利的jquery(学习笔记)

    以上就是关于《锋利的jQuery》学习笔记中涉及的一些核心知识点，包括jQuery对象与DOM对象的转换、解决库冲突的方法以及jQuery对CSS选择器和选择器的扩展应用。理解并掌握这些内容，将有助于你更加高效地使用jQuery...

    jQuery用noConflict代替$的实现方法

    当你之后引入jQuery时，可以使用`noConflict()`来确保`$`继续指向Prototype，同时使用`jQuery`或自定义别名（如`myJQ`）来调用jQuery的方法。 ```html &lt;script src="prototype.js"&gt;&lt;/script&gt; &lt;script src="jquery....

    避免jQuery名字冲突 noConflict()方法

    为了解决这一问题，jQuery提供了一个非常有用的函数——noConflict()方法。这个方法允许开发者在同一页内使用多个JavaScript库，即使它们有名称冲突，也能正常工作。当jQuery被加载到页面上时，它会尝试获取对$符号...

    解决其他js和jquery冲突方法

    三、使用 jQuery.noConflict()方法将变量$的控制权让渡给其他库，同时使用 jQuery(function($){...})方法来使用 jQuery。这可以避免与其他库的冲突，同时也可以继续使用$方法。 四、使用 jQuery.noConflict()方法将...

    jquery学习进阶使用

    ### jQuery 学习进阶使用知识点详解 #### 一、jQuery 遍历方法 ...以上是对 jQuery 遍历方法、过滤方法、AJAX 技术及 $.noConflict() 方法的详细介绍，希望能帮助到正在学习或使用 jQuery 的开发者们。

    三分钟带你玩转jQuery.noConflict()

    jQuery.noConflict() 是jQuery库提供的一种机制，用于解决在同一个网页中使用多个jQuery版本或与其它JavaScript库可能引发的命名冲突问题。这个方法的核心在于它能够恢复全局的`jQuery`和`$`变量到它们在jQuery库...

    Jquery学习笔记分享

    6. **多个库之间的冲突**：如果一个页面中同时使用了使用$作为别名的库，可以通过`$.noConflict()`方法避免冲突。 7. **jQuery对象和DOM对象**：jQuery对象是jQuery函数的结果，而DOM对象是JavaScript原生的对象，...

    轻松搞定jQuery.noConflict()

    jQuery是目前使用最广泛的前端框架之一，有...尽管如此，jQuery.noConflict()背后实现原理依然值得Web开发者学习掌握，成为解决类似全局命名空间污染问题的利器。 jQuery.noConflict()的作用？   jQuery.noConflict

    学习jQuery中的noConflict()用法

    如果你希望继续使用jQuery的$简写，可以通过noConflict()方法创建一个自定义的简写。这个方法返回对jQuery的引用，你可以将这个引用存入一个变量中，然后在你的代码中使用这个变量代替$。例如，你可以这样写： ```...

    jquery与js函数冲突的两种解决方法.docx

    在JavaScript的开发环境中，尤其是当使用多个库或框架时，比如jQuery和其他JavaScript库（如Prototype、MooTools等），可能会遇到函数名或选择器符号`$`的冲突问题。这是因为这些库都倾向于使用`$`作为主要的函数或...

Magicbox
Global site tag (gtag.js) - Google Analytics