首先导入js文件
&%@ page language="java" contentType="text/ charset=UTF-8"
pageEncoding="UTF-8"%&
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&Insert title here&/title&
&script type="text/javascript" src="js/jquery.min.js"&&/script&
&script type="text/javascript"&
// 调用jquery
//相当于Window.load()当窗口加载完毕之后触发
//alert("hello jquery");
$(function () {
//alert("hello jquery");
//id选择器
$("#bt1").click
function()
alert("id 点击了按钮");
//标签选择器
//属性过滤器
$("input:button").click
function()
alert("通过标签选择器 选中了按钮");
//类选择器
$(".cl").click
function()
alert("通过标签选择器 选中了按钮");
//使用DOM方式获取jQuery元素
var bt_3 = document.getElementById("bt3");
var $jbt_3=$("#bt3");
$jbt_3.click(
function(){
alert("将DOM对象转为jQuery对象");
//将jQuery对象转为DOM对象
//<span style="color: #.获得jQuery对象
var $jbt_1=$("#bt1");
alert("$jbt_1集合长度="+$jbt_1.length);
//<span style="color: #.将jQuery对象转为DOM对象
var bt_1=$jbt_1[0];//var bt_1=$jbt_1.get(0);
//使用DOM方式获得文本内容
alert("DOM按钮的内容="+bt_1.value);
//button按钮
var $jbt_4=$("button");//使用标签选择器
alert("$jbt_4集合长度="+$jbt_4.length);
var bt_4=$jbt_4[0];
//使用DOM方式获得文本内容
alert("DOM button按钮的内容="+bt_4.firstChild.nodeValue);
//使用jQuery方式获得文本内容
$jbt_4.click(
function()
alert("button 的 文本="+$(this).text())
调用jquery
&input type="button" id="bt1" value="按钮1"&
&input type="button" id="bt2" value="按钮2"&
&input type="text" class="cl" &
&input type="button" id="bt3" value="按钮3"&
&button id="bt4"&按钮4&/button&
&button id="bt5"&按钮5&/button&
阅读(...) 评论()jquery选择器、属性设置用法经验总结
字体：[ ] 类型：转载 时间：
最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些jquery选择器、属性设置用法，供大家参考
本人是一名小白，应届毕业生，以前没用过jquery，最近做项目用到了jquery。在做的过程中走了很多弯路，不停的搜索。总结出了一些用法，供大家参考： 最基本的选择器语法包括：id、class、标签、属性，这和css选择器是一致的。 ID选择器要在ID前加#，比如要选择一个ID为myDivID的div元素（&div id="myDivID"&&/div&）可以这样写:
代码如下: $("#myDivID");
D是不能重复的，所以ID选择器选出来的是一个jquery对象。 class选择器要在class前加点（.），比如要选择一个class为myInputClass的input元素（&input type="text" class="myInputClass"/&）可以这样写：
代码如下: $(".myInputClass");
class是可以重复的，所以class选择器选出来的可以是一类元素，即好多个元素，所以jquery选出来的是个数组，可以引用下标来选择每个元素：比如
代码如下: for(var i = 0; i & $(".myInputClass"). i++) {$(".myInputClass")[i];}
这样可以迭代出每个元素。 标签选择器直接写标签类型即可，比如要选择一个段落p标签（&p&&/p&）即可这样写：
代码如下: $("p");
标签选择器选出来的也是一个数组，选出所有的p标签元素，也可以用上面的方法迭代出所有的元素。 属性选择器要在前面加方括号（[]），比如要选择含有name="xxName"的元素，可以这样写：
代码如下: $("[xxName]");
这样来选择，选择出的也是一个数组，因为name是可以重复的。 ID选择器可以精确的选出一个元素来，但在开发中我们可能更多的要选择出一组元素，怎样才能精确的选择出我们想要的元素呢，其实几种选择器是可以混合使用的：
代码如下: &div id="attrValueTab"& &span style="white-space:pre"& &/span&&p& &span style="white-space:pre"& &/span&&input type="button" value="确定" /& &input type="text" value="odd" /& &input type="text" value="even" /& &span style="white-space:pre"& &/span&&/p& &span style="white-space:pre"& &/span&&p& &span style="white-space:pre"& &/span&&input type="button" value="取消" /& &input type="text" value="odd" /& &input type="text" value="even" /& &span style="white-space:pre"& &/span&&/p& &/div&
&比如我们要选择偶数个文本标签，即：写着even的文本框。我们可以这样来选择： 首先选中这个div，然后再选中p，然后再选中type=“text”的文本框，最后再选中偶数个位置：
代码如下: $("#attrValueTab p input[type='text']:even");
组合选择在开发中是非常有用的。可以用下面这种方法来选中被勾选的button或者是checkbox元素：
代码如下: $("input[name='avDefValue_input']:checked");
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具页面已拦截
无锡网警提示您：
该网站已被大量用户举报，且存在未经证实的信息，可能会通过各种手段来盗取您的账号或骗取您的财产。页面已拦截
无锡网警提示您：
该网站已被大量用户举报，且存在未经证实的信息，可能会通过各种手段来盗取您的账号或骗取您的财产。一、ID选择器
ID选择器使用"#"前缀标识符进行标识，后面紧跟指定的元素的ID名称。
#box{ width:<span style="color: #px; height:<span style="color: #px;}
元素的ID名称是唯一的，只能对应于文档中一个具体的元素。在HTML中，用来构建整体框架的标签应该定义ID属性，因为这此对象一般在页面中都是比较唯一的，固定的，不会重复，如Logo包含框，导航条，主体包含框，版权区域等。
二、ID设置页面布局
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&link type="text/css" rel="stylesheet" href="css/test4.css"
&title&测试ID&/title&
&div id="header"&&!--头部模块--&
&div id="logo"&&/div&&!--网站logo--&
&div id="banner"&&/div&&!--广告条--&
&div id="nav"&&/div&&!--导航条--&
&div id="main"&&!--主体模块--&
&div id="left"&&/div&&!--左侧通栏--&
&div id="content"&&/div&&!--内容--&
&div id="footer"&&!--底部模块--&
&div id="copyright"&&/div&&!--版权信息--&
@charset "utf-8";
/* CSS Document */
margin:0 auto;
width:<span style="color: #px;
height:<span style="color: #px;
border:solid 1px #000000;
width:<span style="color: #px;
height:<span style="color: #px;
border:solid 1px #000000;
float:left;
margin-left:30px;
float:left;
width:<span style="color: #px;
height:<span style="color: #px;
border:solid 1px #000000;
clear:both;
margin:0 auto;
width:<span style="color: #px;
height:<span style="color: #px;
border:solid 1px #000000;
三、外部ID内部class属性
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&link type="text/css" rel="stylesheet" href="css/test3.css" /&
&title&ID选择器&/title&
&div id="father"&
&div class="child1"&&/div&
&div class="child2"&&/div&
&div class="child3"&&/div&
@charset "utf-8";
/* CSS Document */
/* 父级样式*/
width:<span style="color: #px;
height:<span style="color: #px;
border:solid 2px blue;
margin:5px;
/* 通过父级样式设置父级样式下的标签div模式*/
#father div{
width:<span style="color: #px;
height:<span style="color: #px;
border:solid 1px red;
padding:10px;
margin:10px;
background-color:#0000FF;
/* 通过父级样式设置父级样式下的类*/
#father .child1{
width:<span style="color: #px;
height:<span style="color: #px;
margin:20px;
padding:10px;
border:solid 5px #FF00FF;
background-color:#66FF00;
/* 通过父级样式设置父级样式下的类*/
#father .child2{
width:<span style="color: #px;
height:<span style="color: #px;
margin:10px;
padding:10px;
border:solid 5px #00FF00;
background-color:#FF0000;
/*这里直接设置类样式不起作用因为上面通过#father div已经设置过了，这里的类选择器优先级小于标签选择器*/
width:<span style="color: #px;
height:<span style="color: #px;
margin:10px;
padding:10px;
border:solid 10px #0000FF;
background-color:#FF00FF;
阅读(...) 评论()