JQuery魔力之$("tagName")与selector_jquery

JQuery魔力(一)$("tagName")

DOM 中的 getElementsByTagName()方法在JQuery中的表现就是$("tagName")这么简单!

匿名函数来解决 window.onload 事件

对页面上的所有"div"标记下手,定义统一的外观

对"body"标记定义外观

动态添加一个"span"标记将其放置在"body"里

复制代码 代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery 测试</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
$(function () {
$("div").width(100)
.css("color", "red")
.css("margin", "20px")
.css("border", "dotted 1px green");
$(document.body).css("background-color", "#cccccc");
$("<span>Four</span>").appendTo("body");
});
</script>
<script type="text/javascript">
$(function () {
var v = $("div");
alert(v.length);
for (var i = 0; i < v.length; i++) {
alert(v[i].innerHTML);
}
});
</script>
</head>
<body>
<div>
第一个div</div>
<div>
第二个div</div>
<div>
第三个div</div>
</body>
</html>

JQuery魔力(二) selector
tag标签(可以是:p、div、button …)标签本身具有ID、Class等属性

复制代码 代码如下:

$("tag") //取得页面中的某种标签的集合 同 document.getElementsByTagName("tag")
$("#id") //据id取得页面中的元素 同 document.getElementById("id")
$("tag#id") //据id取得标签为tag元素集合
$(".class") //据class取得元素集合 同 document.getElementsByClassName("class")
$("tag.class") //据class取得标签为tag的元素集合
$("tag1 tag2") //取得tag1内的tag2类型元素 同
$("tag1 > tag2")
$("tag1:has(tag2)") //取得包含tag2的tag1类型的元素集合

上面的selector充分体现了JQuery存在的价值,就是语法简洁且语义容易理解。

时间: 2024-10-22 01:21:40

JQuery魔力之$(&quot;tagName&quot;)与selector_jquery的相关文章

信息- VBScript 运行时错误 类型不匹配: &amp;amp;#39;[string: &amp;amp;quot;&amp;amp;quot;]&amp;amp;#39; line 12

问题描述 VBScript 运行时错误 类型不匹配: '[string: ""]' line 12 <%Option Explicit%> <%dim cartstrcartstr = getCartFromCookie()if (cartstr=NULL or cartstr ="""") then response.redirect ""Cart.asp"" response.ende

PostgreSQL实现MySQL&amp;quot;insertignore&amp;quot;语法

          对MySQL熟悉的人可能都知道,MySQL 有一个"insert ignore" 语法来忽略已经存在的记录. PostgreSQL暂时不提供这样的语法,但是可以用其他方法来代替. t_girl=# d insert_ignore Table "ytt.insert_ignore" Column | Type | Modifiers ----------+------------------------+----------- id | integ

Jquery attr(&amp;quot;checked&amp;quot;) 返回checked或undefined 获取选中失效_jquery

假设我们现在需要这样的场景:页面上有一个checkbox,我们期望通过Jquery来获得它是否选中,或者通过Jquery来让它被选中. 在JQ1.6之前的版本,我们会这样写我们的代码: 复制代码 代码如下: <input type='checkbox' id='cb'/> <script> //获取是否选中 var isChecked = $('#cb').attr('checked'); //设置选中 $('#cb').attr('checked',true); </scr

求助!jquery mobile 的data-role=&amp;amp;quot;list-divider&amp;amp;quot;使用问题!

问题描述 求助!jquery mobile 的data-role="list-divider"使用问题! jquery mobile 用data-role="list-divider"会自动在后面加一条<li></li>标签怎么去除掉? <ul data-role="listview" id="login-me-listview" data-mini="true"> &l

Jquery判断$(&amp;quot;#id&amp;quot;)获取的对象是否存在的方法_jquery

一.判断对象对象是否存在 如果是下面的 jQuery 代码判断一个对象是否存在,是不能用的 复制代码 代码如下: if($("#id")){ }else{} 因为 $("#id") 不管对象是否存在都会返回 object . 正确使用判断对象是否存在应该用: 复制代码 代码如下: if($("#id").length>0){}else{} 使用 jQuery 对象的属性 length 来判断,如果 > 0 就存在. 或者 复制代码 代

Jquery选择子控件&amp;quot;大于号&amp;quot;和&amp;quot; &amp;quot;区别介绍及使用示例_jquery

parent > child 概述 在给定的父元素下匹配所有的子元素 参数 parentSelector任何有效选择器 childSelector用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 描述: 匹配表单中所有的子级input元素. HTML 代码: 复制代码 代码如下: <form> <label>Name:</label> <input name="name" /> <fieldset> <la

jquery插件-datetable中&amp;amp;quot;fnCreatedCell&amp;amp;quot;的参数问题

问题描述 datetable中"fnCreatedCell"的参数问题 datetable中"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {的5个参数分别是什么 解决方案 nTd应该是一个对象,所指的是目标单元格: sData是指目标单元格中所对应的值: iRow是指目标单元格在datatable中所在的行数: 相对应,iCol就是指目标单元格在datatable中所在的列数: 我的回答仅供参考,

jquery中的 $(&amp;quot;#jb51&amp;quot;)与document.getElementById(&amp;quot;jb51&amp;quot;) 的区别_jquery

在今天写一个canvas的小程序时,才发现这两者是不一样的. 直接用alert()来显示这两个方法倒底获得的是什么.代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jb51</title> <link href="css/index.css" rel="stylesheet&

js中事件绑定,$(&amp;amp;quot;body&amp;amp;quot;).on(&amp;amp;quot;click&amp;amp;quot;)与$(&amp;amp;quot;&amp;amp;quot;).click()区别

问题描述 js中事件绑定,$("body").on("click")与$("").click()区别 <dl> <dt>性别</dt> <dd> <a href="javascript:void(0);" class="sex_icon set_icon"></a><p>男</p> <a href=&quo