jquery_01
01库引用
<title>库引用</title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
</head>
<body id="d1">
<p>奔跑吧,兄弟</p>
</body>
<script type="text/javascript">
//alert($); //有对象则表示引入成功!
alert(jQuery);
//问题:$符号代表的是什么? $代表的是jq的一个对象---------jQuery对象
//jQuery对象:是 jq里面最 重要的对象,所有元素以及方法的使用都是通过该对象来进行调用
//语法结构
var obj=10; //js变量
var $obj=20; //jq变量
alert(obj+$obj); //可以直接运算
//元素的获取
var a = document.getElementById("d1");//js获取方式
//内容的设置
a.innerHTML="我是通过js设置的内容 !";
//样式的设置
a.style.color="red";
a.style.fontSize="50px";
//a.css("backgroud","gray"); //js对象不能使用jq里面的方法 ,反之一样
alert(a);
var $a=$("#d1"); //jq获取方式
$a.html("我是通过jq方式设置的内容!");//设置方式
//样式的设置
$a.css("color","green");
/* $a.css("fontSize","20px"); */
$a.css("color","green").css("fontSize","35px"); //连贯写法
alert($a);
</script>
</html>
02加载模式
<title>加载模式</title>
<style type="text/css">
img{
width:250px;
height:250px;
}
</style>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//js里面的加载函数
/*
window.onload = function(){
setTimtout(function() {
var obj = document.getElementById("p1");
obj.style.color="red";
slert("ok");
},2000);
}
*/
//jq里面的加载函数
/* $(document).ready(
function(){
//等页面加载完毕后需要执行的代码------ 代码包括js代码以及jq代码
/* var obj = document.getElementById("p1");
obj.style.color = "green";
alert("ok");
var $obj=$("#p1");
$obj.css("color","blue");
}
) */
</script>
</head>
<body>
<p id="p1">你好啊,闫建兴</p>
<img alt="" src="IMG_0270.JPG">
<ul>
<li>中国</li>
<li>美国</li>
<li>英国</li>
<li>法国</li>
</ul>
</body>
<script type="text/javascript">
var obj = document.getElementById("p1");
obj.style.color="red";
//对象转换
//jq对象 --->js对象
var $a = $("li");
//第一种方式
var a = $a[0];
a.style.color="red";
//第二种方式
var b =$a.get(2);
b.style.color="green";
alert($a.size());//jq对象
//js 对象 --〉 jq对象
var obj = document.getElementById("p1"); //js对象
obj.style.color = "red";
var $obj = $(obj); //jq对象
$obj.css("color","yellow").html("js对象转换后的文字");
</script>
</html>
03库冲突
<title>库冲突</title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//解决库冲突三种方式
//第一种
/* $.noConflict();//释放该$对象,其他的库,才能够用$代表自己库的特殊对象
alert($);//undefined 不可用
alert(jQuery); //可用
jQuery(document).ready(
function(){
jQuery("#d1").css("color","blue");
}
); */
//第二种
/* var jq = $.noConflict();//接受一个对象,用来操作后续的juery
jq(document).ready(
function(){
jq("#d1").css("color","green");
}
); */
//第三种
/* $.noConflict();
jQuery(document).ready(
function($){//后续jq操作还可以用 $代表
$("#d1").css("color","yellow");
}
); */
</script>
</head>
<body>
<p id="d1">我有一个家</p>
</body>
</html>
04基本选择器
<title>基本选择器 </title>
<script type="text/javascript" src="./libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//基本选择器的使用 类 标签 id 通配符 多条件
/* alert($); */
$(document).ready(function(){
/* $("#d3").css("color","red");
$(".c1").css("color","red");
$("li").css("color","red");
$("*").css("color","green");
$("*").css("color","gray"); */
$()
});
</script>
</head>
<body>
<p id="d1">id选择器</p>
<p class="c1">类选择器</p>
<p id="d4">类选择器</p>
<p id="d2">类选择器</p>
<p id="d3">类选择器</p>
<ul>
<li>深圳</li>
<li id="d2">北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
05表单提交的三种方式
<title>表单提交的三种方式</title>
<script type="text/javascript">
//button按钮结合submit()提交表单
function checkForm(){
if(document.form1.in1.value==""){
alert("用户名不能为空");
}else if(document.form1.in2.value.length==0){
alert("密码不能为空。。。");
}else{
alert("提交成功!");
form1.sumbit();//提交表单
}
}
function checkForm2(){
if(document.form1.in1.value==""){
alert("用户名不能为空");
return false;
}else if(document.form1.in2.value.length==0){
alert("密码不能为空。。。");
return false;
}else{
alert("提交成功!");
return true;
}
}
//区别:调用方式以及具有返回值
//submit按钮结合onsubmit(方法)
function checkForm3(){
if(document.form1.in1.value==""){
alert("用户名不能为空");
return false;
}else if(document.form1.in2.value.length==0){
alert("密码不能为空。。。");
return false;
}else{
alert("提交成功!");
return true;
}
}
</script>
</head>
<body>
<form action="#" name="form1" method="post" οnsubmit="return checkForm3()">
用户名:<input type="text" name="in1"/><br>
密 码:<input type="text" name="in2"/><br>
<!-- <input type="button" value="提交" οnclick="checkForm()"/> -->
<!-- <input type="submit" value="提交" οnclick="return checkForm2()"/> -->
<input type="submit" value="提交"/>
</form>
</body>
</html>