1.根据ID获取指定的元素
<body>
<input id="inputID"type="button" value="这就是jQuery框架,写少代码，做多事情"/>
<div id="divID">哈哈...</div>
<hr>
<script type="text/javascript">
//取得<input>标签中的value属性的内容
var $input = $("#inputID"); //根据id获取指定元素
var input = $input.val(); //获取元素指定属性的值 （val()方法相当于dom对象中的value属性）
document.write(input);//输出到页面上
document.write("<hr><br/>");
//取得<div>标签中的文本内容
var $div = $("#divID");
var txt = $div.html(); //获取元素中内容，相当于dom对象中的innerHTML属性
document.write(txt);
/*
小结：
1.使用jquery根据id获取某个元素时，要使用#号开头，eg：$(#inputID)；
2.dom对象中的属性在jquery中一般都被封装成方法了，eg：
dom对象 jquer对象
value属性 val()
innerHTML属性 html()
length属性 size() ⊙jquery中也有length属性，其功能和size()方法一样
调用方法或属性的时候不能张冠李戴。
*/
</script>
</body>
2.DOM操作与jQuery操作对错误的处理方式的比较
Dom在找不到指定的元素时没有任何提示，jquer会显示undefined。
3. dom对象和jquery对象的相互转换
<body>
<input id="inputID"type="button" value="这就是jQuery框架,写少代码，做多事情"/>
<div id="divID">哈哈</div>
<script type="text/javascript">
//取得<input>标签中的value属性的内容[dom对象->jquery对象]
// varinputElement = document.getElementById("inputID"); //这个是dom对象
// var$input = $(inputElement); //将dom对象转成jquery对象 格式：var jquery对象 = $(dom对象)
// varvalue = $input.val(); //调用jquery对象的方法
// alert(value);
//取得<div>标签中的文本内容[jquery对象->dom对象]
var $div = $("#divID"); //这个是jquery对象
// vardivElement = $div[0]; //将jquery对象转成dom对象,索引有0
var divElement = $div.get(0);
var txt =divElement.innerHTML;
alert(txt);
/*
小结：
1.dom对象和jquery对象是可以相互转换的；
2.dom对象转成jquery对象 格式：var jquery对象 = $(dom对象)；
3.jquery对象转成dom对象 格式：var dom对象 =jquery对象[0]或
jquery对象.get(0)，注意索引只有0是可用的。
*/
</script>
</body>
4.JQuery九大选择器
4.1基本选择器
通过id，标签名，样式名，多条件来获得指定元素。
Id var $div = $("#div1ID"); 相当于dom中document.getElementById(“div1ID”)
标签名 var $div = $("div "); 相当于dom中document.getElementsByTagName(("div ")
样式名 var $div = $(".className");
多条件 var $all = $("div, span, p"); var $all = $("#div1ID, .myClass,p");
将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
4.2层级选择器
<form>
<input type="text"value="a"/>
<table>
<tr>
<td>
<input type="checkbox"value="b"/>
</td>
</tr>
</table>
</form>
<input type="radio"value="c"/>
<input type="radio"value="d"/>
<input type="radio"value="e"/>
<script type="text/javascript">
//1)找到表单form下所有的input元素的个数
// var$input = $("form input"); //格式$(祖先 后代) 祖先元素下匹配所有的后代元素
// varsize = $input.size();
// alert(size);
//2)找到表单form下所有的直接子级input元素个数
// var$input = $("form > input"); //格式：$(父元素 >直接子元素)
// varsize = $input.size();
// alert(size);
//3)找到表单form同级第一个input元素的value属性值
// var$input = $("form + input"); //格式：$(父元素 +紧接着父元素的子元素)
// varsize = $input.size();
// alert(size);
//4)找到所有与表单form同级的input元素个数
var $input = $("form ~input"); //格式：$(父元素 ~和父元素同辈的子元素)
var size =$input.size();
alert(size);
/*
小结：
1.$(父元素 子元素）祖先元素下匹配所有的后代元素
2.$(父元素 > 直接子元素)
3.$(父元素 + 紧接着父元素的子元素)
4.$(父元素 ~ 和父元素同辈的子元素)
*/
</script>
</body>
4.3基本选择器
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input type="checkbox"checked/>
<input type="checkbox"checked/>
<input type="checkbox"/>
<table border="1">
<tr><td>line1---0</td></tr>
<tr><td>line2---1</td></tr>
<tr><td>line3---2</td></tr>
</table>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
<script type="text/javascript">
//1)查找UL中第一个元素的内容
// alert($("ulli:first").html());
//2)查找UL中最后个元素的内容
// alert($("ulli:last").html());
//3)查找所有未选中的input元素个数
// alert($("input:not(:checked)").size());
//4)查找表格的1、3、5...奇数行个数 下标从0开始
// alert($("tabletr:odd").size());
//5)查找表格的2、4、6...偶数行个数下标从0开始
// alert($("tabletr:even").size());
//6)查找表格中第二行的内容，从索引号0开始
// alert($("tabletr:eq(1)").html());
//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
// alert($("tabletr:gt(0)").size());
//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
// alert($("tabletr:lt(2)").size());
//9)给页面内所有标题<h1><h2><h3>加上红色字体
$(":header").css("color", "red");
</script>
</body>
4.4内容选择器
<script type="text/javascript"src="../js/jquery-1.6.js"></script>
<style type="text/css">
.myClass{
font-size:44px;
color:blue
}
</style>
</head>
<body>
<div><p>John Resig</p></div>
<div><p>George Martin</p></div>
<div>Malcom JohnSinclair</div>
<div>J. Ohn</div>
<p></p>
<p></p>
<p>段落</p>
<div></div>
<script type="text/javascript">
//1)查找所有包含文本"John"的div元素的个数
// alert($("div:contains('John')").size()); //2
//2)查找所有p元素为空的元素个数
// alert($("p:empty").size());//2
//3)给所有包含p元素的div元素添加一个myClass样式
// $("div:has(p)").addClass("myClass");
//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
alert($("p:parent").size());
</script>
</body>
4.5可见性选择器
<body>
<table border="1"align="center">
<tr style="display:none">
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
<tr>
<td>Value 3</td>
</tr>
</table>
<script type="text/javascript">
//1)查找隐藏的tr元素的个数
// alert($("tr:hidden").size());//1
//2)查找所有可见的tr元素的个数
// alert($("tr:visible").size());//2
alert($("tr:not(:hidden)").size()); //取反
</script>
</body>
4.6属性选择器
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
<input type="checkbox"name="newsletter" value="Hot Fuzz" />
<input id="myID"type="checkbox" name="newsletter"value="Cold Fusion" />
<input type="checkbox"name="newsaccept" value="Evil Plans" />
<script type="text/javascript">
//1)查找所有含有id属性的div元素个数
// alert($("div[id]").size());//1
//2)查找所有name属性是newsletter的input元素，并将其选中
// alert($("input[name='newsletter']").size());//2
//3)查找所有name属性不是newsletter的input元素，并将其选中
// $("input[name!= 'newsletter']").attr("checked", true);
//4)查找所有name以'news'开始的input元素，并将其选中
// $("input[name^= 'news']").attr("checked", true);
//5)查找所有name 以'letter'结尾的input元素，并将其选中
// $("input[name$= 'letter']").attr("checked", true);
//6)查找所有name包含'news'的input元素，并将其选中
// $("input[name*= 'news']").attr("checked", true);
//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的，并将其选中
$("input[id][name$= 'letter']").attr("checked", true); //条件可以并列
</script>
</body>
4.7子元素选择器
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<ul>
<li>Jack</li>
</ul>
<script type="text/javascript">
//1)迭代每个ul中第1个li元素中的内容,索引从1开始
// $("li:first-child").each(function(){ //对比 ：first first-child取出的是每一组中的li，first取出的是第一个li
// alert($(this).html()); //$(this)用于将dom对象转成jquery对象
// });
//2)迭代每个ul中最后1个li元素中的内容,索引从1开始
// $("li:last-child").each(function(){ X
// alert($(this).html()); //$(this)用于将dom对象转成jquery对象
// });
//3)在ul中查找是唯一子元素的li元素的内容
$("li:only-child").each(function() {
alert($(this).html()); //$(this)用于将dom对象转成jquery对象
});
</script>
</body>
4.8表单选择器
<body>
<form>
<input type="button"value="Input Button"/><br/>
<input type="checkbox"/><br/>
<input type="file"/><br/>
<input type="hidden"/><br/>
<input type="image"/><br/>
<input type="password"/><br/>
<input type="radio"/><br/>
<input type="reset"/><br/>
<input type="submit"/><br/>
<input type="text"/><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//1)查找所有input元素的个数
// alert($(":input").size()); // 对比$("input") 这个只能获取到标签名为input的所有元素；$(":input")匹配所有 input, textarea,select 和 button 元素.
//2)查找所有文本框的个数
// alert($(":text").size());
//3)查找所有密码框的个数
alert($(":password").size());
//4)查找所有单选按钮的个数
alert($(":radio").size());
//5)查找所有复选框的个数
alert($(":checked").size());
//6)查找所有提交按钮的个数
alert($(":submit").size());
//7)匹配所有图像域的个数
alert($(":image").size());
//8)查找所有重置按钮的个数
alert($(":reset").size());
//9)查找所有普通按钮的个数
alert($(":button").size());
//10)查找所有文件域的个数
alert($(":file").size());
//11)查找所有input元素为隐藏域的个数
alert($("input:hidden").size());
</script>
</body>
4.9表单对象属性选择器
<body>
<form>
<input name="email"disabled="disabled" />
<input name="password"disabled="disabled" />
<input name="id"/>
<input type="checkbox"name="newsletter" checked="checked" value="Daily"/>
<input type="checkbox"name="newsletter" value="Weekly" />
<input type="checkbox"name="newsletter" checked="checked" value="Monthly"/>
<select>
<option value="1">Flowers</option>
<option value="2"selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
</form>
<script type="text/javascript">
//1)查找所有可用的input元素的个数
// alert($("input:enabled").size());
//2)查找所有不可用的input元素的个数
// alert($("input:disabled").size());
// alert($("input:not(:enabled)").size());
//3)查找所有选中的复选框元素的个数
// alert($("input:checked").size());
//4)查找所有未选中的复选框元素的个数
// alert($(":checkbox:not(:checked)").size());
//5)查找所有选中的选项元素的个数
alert($("selectoption:selected").html());
</script>
</body>
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
