jQuery_基础2

el/2024/2/26 0:07:18

if(document.getElementById("hello"))
{
document.getElementById("hello").style.color = "red";//如果没上面的if判断 ,没对应的id 会报错,get不到dom对象
}


<script type="text/javascript">
alert("test!!");
alert($("#hello").css("color","red"));//读一个参数 写两个参数,方法名同一个(jquery调用css方法 通常做法)
alert($("#hello").css("color"));
alert($("#hello")[0].innerHTML);//转成dom对象
alert($("#hello").get(0));//转成dom对象
//当没有id时,获取不到,但还是一个对象,dom会报错.jquery不会报错,一个空的对象. length:获取到dom对象的个数,每个jquery对象都有的属性
</script>

<script type="text/javascript">
/*
window.onload = function()
{
var myTable = document.getElementById("table1");//逐层遍历
var myTBody = myTable.getElementsByTagName("tbody")[0];
var myTrs = myTBody.getElementsByTagName("tr");

for(var i = 0; i < myTrs.length; i++)
{
if(i % 2 == 0)
{
myTrs[i].style.backgroundColor = "red";//css中:style="background-color" JS中要去掉横线,横线后的首字母变大写
}
else
{
myTrs[i].style.backgroundColor = "blue";
}
}
}
*/
//两种方法 上面的原生JS方法,下面的jquery方法
$(function()
{
$("#table1>tbody tr:even").css('background', 'red');
$("#table1>tbody tr:odd").css('background', 'blue');
});

</script>
<body>
<table id="table1" border="1" align="center" width="80%">
<tbody><!-- tbody:表示表格的实际内容 -->
<tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>
<tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>
<tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>
<tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>
<tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>
<tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>
<tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>
<tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>
<tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>
</tbody>
</table>
</body>


<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
/*
window.onload = function()
{
var btn = document.getElementById("myButton");

btn.onclick = function()
{
var count = 0;

var checkboxs = document.getElementsByName("myCheck");

for(var i = 0; i < checkboxs.length; i++)
{
if(checkboxs[i].checked)
{
count++;
}
}

alert("number: " + count);
}
}
*/

$(function()
{
$("#myButton").click(function()
{
alert("选中个数: " + $('input[name="myCheck"]:checked').length);
});
});

</script>


</head>

<body>

<input type="checkbox" name="myCheck" checked="checked">
<input type="checkbox" name="myCheck">
<input type="checkbox" name="myCheck" checked="checked">
<input type="checkbox" name="myCheck">
<input type="checkbox" name="myCheck">
<br><br>
<input type="button" value="click me" id="myButton">


</body>


<head>
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
alert($("a").length);//如果获取的是根据id来的 length就为1,如果根据标签来的有几个就显示几个
alert($("#test1").html());
alert($("#test1").text());
alert($("#test1").length);
alert($("#test1").val);

alert($(".test2").length);//根据class来 有几个就显示几个
});
</script>
</head>
<body>
<a class="test2" id="test1" href="http://www.google.com"><b><B>google</B></b></a>
<a class="test2" id="test1" href="http://www.yahoo.com">yahoo</a>
</body>


$(document).ready(function()
{
//button1的按钮 点击 响应click(JS中叫onclick)
$("#button1").click(function()
{ //id为one的标签 背景颜色改为红色
$("#one").css("background", "red");
});

$("#button2").click(function()
{
//根据class找.底层隐藏了循环
$(".mini").css("background", "green");
});

$("#button3").click(function()
{
//根据div查找
$("div").css("background", "orange");
});

$("#button4").click(function()
{
//所有的
$("*").css("background", "blue");
});

$("#button5").click(function()
{
$("span, #two, .mini").css("background", "pink");
});


});

 $(document).ready(function()
{
$("#button1").click(function()
{
//body 下面的所有div(子元素,孙子元素,所有后代),$('body div'):单引双引都可以
$('body div').css("background", "red");
});

$("#button2").click(function()
{
//body下的div子元素,仅限子元素.孙子元素不算
$('body>div').css("background", "blue");
});

$("#button3").click(function()
{
//class为one的下一个div元素(可能有很多个下一个,下一个class也为one的情况下)
//下面两种写法等价
//$('.one + div').css("background", "green");
$('.one').next('div').css("background", "green");
});

$("#button4").click(function()
{
//id为two后的所有兄弟元素,下面两种写法等价
//$("#two ~ div").css("background", "orange");
//$('#two').nextAll('div').css("background", "orange");


//id为two的所有兄弟元素. 与前后顺序无关.
$('#two').siblings('div').css("background", "orange");
});
});

//$(document)  可以写成 $()  默认是document
$(document).ready(function()
{
$("#button1").click(function()
{
//选择第一个div
$("div:first").css("background", "red");
});

$("#button2").click(function()
{
//最后一个div
$("div:last").css("background", "blue");
});

$("#button3").click(function()
{
//索引为偶数的div.隐藏的也参与
$("div:even").css("background", "green");
});

$("#button4").click(function()
{
//索引位置为奇数的div
$("div:odd").css("background", "orange");
});

$("#button5").click(function()
{
//索引为3的元素
$("div:eq(3)").css('background', "pink");
});

$("#button6").click(function()
{
//class不为one的div
$("div:not(.one)").css('background', "yellow");
});

$("#button7").click(function()
{
//索引大于3的div
$("div:gt(3)").css('background', "#abcdef");
})

$("#button8").click(function()
{
//索引小于3的素有元素
$("div:lt(3)").css('background', "#fedcba");
})

$("#button9").click(function()
{
//选取标题元素:h1-h6 6个
$(":header").css('background', "#cdefab");
})


});
$(function()
{
$("#button1").click(function()
{
//外面双引号则里面单引号 或者 相反
//文案包含:test222
$("div:contains('test222')").css("background", "red");
});

$("#button2").click(function()
{
//不包含文本内容,不包含空,或者不包含子元素的div
$("div:empty").css("background", "green");
});

$("#button3").click(function()
{
//class为mini
$("div:has(.mini)").css("background", "blue");
});

$("#button4").click(function()
{
//和empty对立
$("div:parent").css("background", "#abaaee");
});

});

 <script type="text/javascript">

$().ready(function()
{
$("#button1").click(function()
{
alert($('div:hidden').length);
alert($('input:hidden').length);

//方法链. 把不可见的div变为可见
//show();里面的参数:时间,整个显示动作的时间
$('div:hidden').show(1000).css("background", "blue");
});

$("#button2").click(function()
{
//可见的div
$('div:visible').css("background", "green");
});
});

 $(function()
{
$("#button1").click(function()
{
//含有title属性的div
$('div[title]').css("background", "green");
});

$("#button2").click(function()
{
//含有title=test属性的div
$("div[title=test]").css("background","red");
});

$("#button3").click(function()
{
//title不等于test的div,包含不含title属性的div
$("div[title!=test]").css("background","pink");
});

$("#button4").click(function()
{
//含有 tilte=以test开头的div
$("div[title^=test]").css("background","pink");
});

$("#button5").click(function()
{
//含有title=以st结尾的div
$("div[title$=st]").css("background","pink");
});

$("#button6").click(function()
{
//含有title=*st*的div
$("div[title*=st]").css("background","pink");
});

$("#button7").click(function()
{
//含有属性id ,tilte,并且title的属性值以t开头,并且以t结尾的div
$("div[id][title^=t][title$=t]").css("background","pink");
});

});

$(function()
{
$("#button1").click(function()
{
//class为one的div 下面的 第二个子元素
//nth:表示第几个. 英文中以th结束
$('div.one :nth-child(2)').css("background", "red");
});

$('#button2').click(function()
{
//每个父元素下的第一个子元素
$('div.one :first-child').css('background', 'green');
});

$('#button3').click(function()
{
//class为one的div的最后一个子元素
$('div.one :last-child').css('background', 'pink');
});

$('#button4').click(function()
{
//如果class为one的div下就一个子元素则选中此子元素
$('div.one :only-child').css('background', 'orange');
});

});

 $(function()
{
$("#button1").click(function()
{
//id为form1 下的input孙子 css不为test 并且可用
$("#form1 input:not(.test):enabled").val("hello world");
});

$("#button2").click(function()
{
//id为form1 下的input孙子 css不为test 并且不可用
$("#form1 input:not(.test):disabled").val("welcome");
});

//表单选择器.多选框
$(":checkbox").click(function()
{
//html方法相当于 dom的innerHTML.
$("div").html('<font color="blue"><b>' + $('input:checked').length +'</b></font>');
});

//change:改变选项的时候
$('select:first').change(function()
{
var str = '';

//each:遍历被选中的元素
$('select:first :selected').each(function()
{
//$(this):将dom的this变成jquery的this
str += $(this).text() + ",";
});

$('div:last').html('<b>' + str + '</b>');
});
});

$(function()
{
alert($('#form1 :text').length);//type="text"的
alert($('#form1 :password').length);//type="password"的
alert($('#form1 :radio').length);//单选按钮
alert($('#form1 :checkbox').length);//多选按钮
alert($('#form1 :submit').length);//提交按钮
alert($('#form1 :input').length);//不仅仅input元素
alert($('#form1 input').length);//form1下的所有input标签,标签的名字.
});

$(function()
{
alert($('.test').length);//class
//加空格找后代元素
alert($('.test :hidden').length); //选择class为test的元素下的的子标签中样式为hidden的后代标签
alert($('.test:visible').length); //可见并且class为test的元素
});
</script>
</head>
<body>
<div class="test">
<div style="display:none">aaaa</div>
<div style="display:none">bbbb</div>
<div style="display:none">cccc</div>
<div style="display:none" class="test" >dddd</div>
</div>
<div class="test" style="display:none">eeee</div>
</body>

http://www.ngui.cc/el/4893638.html

相关文章

jQuery_基础3

<script type"text/javascript" src"jquery-1.4.4.js"></script> <script type"text/javascript"> $(function() { var p $("p");//有这样一种命名规范:jquery对象命名 $p 加一$符号 表示jquery对象 不加表示…

吃“软饭”的兄弟,你们过得好吗?(转)

看到此标题&#xff0c;是不是雷着了兄弟&#xff0c;此“软饭”非彼“软饭”。------软件行业 又一次夜深&#xff0c;困&#xff0c;睡不着。爬起来&#xff0c;打开电脑。写下了这些东西。以此纪念&#xff0c;缅怀那些曾经的过往。都说男人也有生理周期&#xff0c;每个月也…

Spring_定时任务_转

这几天因为工作的需要&#xff0c;用到了spring的定时任务的功能&#xff0c;网上查资料&#xff0c;并且实际运用了一下&#xff0c;觉得spring还是很智能化的,只需要配置一下配置文件就可以了&#xff0c;下面的这篇文章我觉得还是很好的&#xff0c;摘录下来&#xff0c;供以…

HTML_Css_张龙篇

css.css文件: /*p元素用classright 靠右对齐 p元素用classcenter 局中对齐*/p.right {text-align: right}p.center {text-align: center}/*对所有的p只用left对齐**/p {text-align: left}/*所有的h1-h6:用蓝色样式*/h1,h2,h3,h4,h5,h6 { color: blue }/*页面中所有classcent…

精通CSS.DIV网页样式与布局_第二章

<html><head><title>class选择器</title><style type"text/css"><!--.one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */}.two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */}.three{ color:cyan; /*…

(转) Struts2 URL参数 s:if 判断应用

Struts2的s:if标签很怪异&#xff0c;下面来具体地看看&#xff0c;如何用s:if标签来判断URL中的参数。 访问一个带有URL参数的页面&#xff0c;如&#xff1a;http://localhost:8080/a.jsp?namexht555 # <% page language"java" contentType"text/html; ch…

从 iBatis 到 MyBatis(转)

从 iBatis 到 MyBatis&#xff0c;你准备好了吗&#xff1f; 对于从事 Java EE 的开发人员来说&#xff0c;iBatis 是一个再熟悉不过的持久层框架了&#xff0c;在 Hibernate、JPA 这样的一站式对象 / 关系映射&#xff08;O/R Mapping&#xff09;解决方案盛行之前&#xff0c…

Spring使用AOP时ClassCastException问题

[sizelarge]Spirng实现AOP采用动态代理还是CGLIB代理&#xff0c;两种方式如下&#xff1a;[/size] [sizemedium] 1、Spring&#xff1a;自动选择。[/size] 如果有实现接口采用JDK动态代理 如果没有实现接口采用cglib代理 <aop:aspectj-autoproxy proxy-target-class&qu…

Java SE 第一讲_JDK下载_安装_Java程序编译与执行

[sizelarge][b]Java SE 第一讲&#xff1a;[/b][/size] Java SE&#xff1a;Java Standard Edition Java ME: Java Micro Edition Java EE&#xff1a;Java Enterprise Edition Java是由Sun公司推出的&#xff08;2010年初被Oracle公司收购&#xff09;。 收购价格&#xff1…

Java SE 第二讲_原生数据类型

[b]Java SE 第二讲&#xff1a;[/b] 1. Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit [colorred]2. Java中的数据类型分为两大类&#xff1a; 1&#xff09; 原生数据类型 &#xff08;Primitive Data Type&#xff09;共8种 2&#xff09; 引用类型…