$()等同于jQuery()
1.当传入css选择器：以字符串的方式传入
2.传递一个DOM对象，或者document对象，window对像
3.传递一个html文本,会自动创建这个元素
4.传递一个函数
5.jquery回调函数中的this指的是js对象不是jquery对象
6.jquery中的bind方法
bind(event, data, function)
event:
input property change//输入值发生变化时会执行函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my website</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
<!--当页面加载完执行-->
$(document).ready(function(){
$("button").click(function(){
<!--因为每个方法都返回一个对象，因此可以链式调用方法-->
$("p").css("color","red").hide(5000);
})
})
//以上代码可以简写为
$(function(){
$("button").click(function(){
<!--因为每个方法都返回一个对象，因此可以链式调用方法-->
$("p").css("color","red").hide(5000);
})
})
</script>
</head>
<body>
<button type="button" name="button">请点击我</button>
<p>这是一句测试文本</p>
<p>这是一句测试文本</p>
<p>这是一句测试文本</p>
</body>
</html>
通常jQuey()返回的是一个数组可以通过each来遍历每个元素，但不通过each也可以操纵整体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my website</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
// $("li").css("color", "red").hide(5000);
$("li").each(function(i){
$(this).css("color","red").html(i+"---"+"www.php.cn");
})
})
})
</script>
</head>
<body>
<button type="button" name="button">请点击我</button>
<ul>
<li>php中文网1</li>
<li>php中文网2</li>
<li>php中文网3</li>
<li>php中文网4</li>
</ul>
</body>
</html>
jQuery和DOM对象相互转换的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my website</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
//将jQuery对象转换成js对象
$("li").get(0).style.color = "red";
//将js对象转换成jQuery对象
$(document.getElementsByTagName("li")[1]).css("color","yellow");
})
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
emmet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
.class1
<div class="class1"></div>
#id1
<div id="id1"></div>
p.id2
<p class="id2"></p>
a:{导航}
<a:>导航</a:>
a:link
<a href="http://"></a>
a:[href="www.baidu.com"]
<a: href="www.baidu.com"></a:>
#class2[style="width:100px; height:100px; background-color:red"]
<div id="class2" style="width:100px; height:100px; background-color:red"></div>
ul.nav>li.item*8
<ul class="nav">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
ul.nav>li.item*8>a{导航$$}
<ul class="nav">
<li class="item"><a href="">导航01</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航08</a></li>
</ul>
ul.nav>li.item*8>a{导航$$@-}
<ul class="nav">
<li class="item"><a href="">导航08</a></li>
<li class="item"><a href="">导航07</a></li>
<li class="item"><a href="">导航06</a></li>
<li class="item"><a href="">导航05</a></li>
<li class="item"><a href="">导航04</a></li>
<li class="item"><a href="">导航03</a></li>
<li class="item"><a href="">导航02</a></li>
<li class="item"><a href="">导航01</a></li>
</ul>
ul.nav>li.item*8>a{导航$@100}
<ul class="nav">
<li class="item"><a href="">导航100</a></li>
<li class="item"><a href="">导航101</a></li>
<li class="item"><a href="">导航102</a></li>
<li class="item"><a href="">导航103</a></li>
<li class="item"><a href="">导航104</a></li>
<li class="item"><a href="">导航105</a></li>
<li class="item"><a href="">导航106</a></li>
<li class="item"><a href="">导航107</a></li>
</ul>
</body>
</html>
jQuery对属性的操作（不会对源代码有改变,一刷行立马发生变化）
attr()
removeAttr()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my website</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log($("img").attr("alt"));
$("img").attr("src", "gf2.jpg");
$("img").removeAttr("src");
});
</script>
</head>
<body>
<img src="bazi.png" alt="bazi">
</body>
</html>
jQuery修改css样式(会改变源码):
$("").css("属性","属性值",...);
//属性值可以是回调函数,会有两个参数,第一个是当前对象索引,第二个是该属性的原有值,属性可以用驼峰也可以用-连接
$("").css("border-radius",function(i, value){return Math.round(1.2*value);})
jquery修改类样式:(会修改源码)
首先在html文件中创建类样式:
如果要使用该样式:
$("").addClass(“类名”);
判断是否有该类样式:
$("").hasClass(“类名”);
移除该类样式
$("").removeClass(“类名”);
如果无该样式则添加,有则删除
$("").toogleClass(“类名”)
jquery获取标签内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
console.log($("li").eq(4).text());
console.log($("li").eq(1).html());
})
</script>
</head>
<body>
<ul>
<li>"php中文网01"</li>
<li>"php中文网02"</li>
<li>"php中文网03"</li>
<li>"php中文网04"</li>
<li>"php中文网05"</li>
</ul>
</body>
</html>
jquery选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery.js"></script>
<script>
$(function(){
1.属性过
$("[style]").css("background-color", "red");
//2.完全匹配属性值
$("[title='网站名称']").css("background-color","red");
3.指定属性值的起始字符串
$("[title^='网站']").css("background-color","black");
4.指定属性值的末尾字符串
$("[title$='网站']").css("background-color", "yellow");
//5.指定属性值与该字符串不相匹配
$("[title!='abc']").css("background-color", "orange");
//6.模糊匹配,属性值内含有该字符串
$("[title*='Python']").css("background-color", "blue");
//7.含有该单词
$("[title~='Python']").css("background-color", "grey");
//8.多属性查询
$("[title][class]").css("background-color", "pink");
})
</script>
</head>
<body>
<h2>属性过滤器</h2>
<ul>
<li title="网站名称">PHP中文网01</li>
<li title="网站标题" class=>PHP中文网02</li>
<li title="永久免费的学习平台">PHP中文网03</li>
<li title="前端开发课程">PHP中文网04</li>
<li title="免费PHP教学视频">PHP中文网05</li>
<li title="PHP Python JAVA">PHP中文网06</li>
<li style="">PHP中文网07</li>
<li>PHP中文网08</li>
</ul>
</body>
</html>
//位置过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery.js"></script>
<script>
$(function(){
//相等
$("li:eq(0)");
//大于
$("li:gt(7)");
//小于
$("li:lt(2)");
//第一个
$("li:first");
//最后一个
$("li:last");
//偶数
$("li:even");
//奇数
$("li:odd");
//全选
$("li:nth-child(n)");
//选取某一个如第一个
$("li:nth-child(1)");
//选取偶数个
$("li:nth-child(even)");
//选取奇数个
$("li:nth-child(odd)");
})
</script>
</head>
<body>
<h2>属性过滤器</h2>
<ul>
<li title="网站名称">PHP中文网01</li>
<li title="网站标题" class=>PHP中文网02</li>
<li title="永久免费的学习平台">PHP中文网03</li>
<li title="前端开发课程">PHP中文网04</li>
<li title="免费PHP教学视频">PHP中文网05</li>
<li title="PHP Python JAVA">PHP中文网06</li>
<li style="">PHP中文网07</li>
<li>PHP中文网08</li>
</ul>
</body>
</html>
//根据关系来选择元素
/*
A 空格 B 在A元素所有子孙元素中查询B元素
A > B 仅在A元素的子元素中查找B
A ~ B:查找与A有着共同父级的元素
A + B 查找A后面的第一个兄弟元素
*/
Ajax访问php,xml,json格式数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my website</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
console.log(xhr.readyState);
if(xhr.readyState == 4){
//访问json格式数据
alert(xhr.responseText);
obj = JSON.parse(xhr.responseText);
//访问xml格式数据
var xml = xhr.responseXML;
console.log("xml:" + xml);
var name = xml.getElementsByTagName('name')[0].childNodes[0].nodeValue;
var sex = xml.getElementsByTagName('sex')[0].childNodes[0].nodeValue;
var lesson = xml.getElementsByTagName('lesson')[0].childNodes[0].nodeValue;
var job = xml.getElementsByTagName('job')[0].childNodes[0].nodeValue;
var work = xml.getElementsByTagName('work')[0].childNodes[0].nodeValue;
//访问php数据
var php = xhr.responseText;
eval("var obj=" + php);
var name = obj.name;
var salary = obj.salary;
var lesson = obj.lesson[0];
var website = obj.website.sitename;
var domin = obj.website.domain;
console.log(name);
console.log(salary);
console.log(lesson);
console.log(website);
console.log(domin);
$("[name = 'name']").append(name);
$("[name = 'salary']").append(salary);
$("[name = 'lesson']").append(lesson);
$("[name = 'website']").append(website);
$("[name = 'domin']").append(domin);
}
}
xhr.open('get', '1.php');
xhr.send(null);
})
})
</script>
</head>
<body>
<button type="button" name="button">我的信息</button>
<h2 name="name">姓名:</h2>
<h2 name="salary">工资:</h2>
<h2 name="lesson">课程:</h2>
<h2 name="website">网站:</h2>
<h2 name="domin">域名:</h2>
</body>
</html>
jQuery完成Ajax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery.js"></script>
<script>
$(function(){
$("button").click(function(){
$.ajax({//ajax函数:参数是一个对象
type:'GET',
url:'1.json',
data:null,//get方法,不填
dataType:"json",//将获取到的数据类型当作json处理
success: function(data){//完成回调函数
$("#name").text(data.name);
$("#salary").text(data.salary);
$("#lesson").text(data.lesson[2]);
$("#siteName").text(data.website.sitename);
$("#domin").text(data.website.domin);
}
});
});
});
</script>
</head>
<body>
<button type="button" name="button">我的信息</button>
<div>
<p id="name">姓名:</p>
<p id="salary">工资:</p>
<p id="lesson">课程:</p>
<p id="siteName">网站:</p>
<p id="domin">域名:</p>
</div>
</body>
</html>
jQuery中的load方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my website</title>
<script src="../jquery.js"></script>
<script>
$(function(){
$("button").click(function(){
//load获取文内内容
// $("div").load("1.txt");
//load获取html内容
// $("div").load("1.html li");
// $("div").load("1.html li:eq(0)");
// $("div").load("1.html li:odd");
// $("div").load("1.html li:even");
// $("div").load("1.html li:nth-child(odd)");
// 当用了选择器时,data还是从文件中读取的数据,并不是使用了选择器后的数据
$("div").load("1.html li:nth-child(even)", function(data){
console.log(data);
});
//load获取xml文件
//$("div").load("index.xml");//会xml文件,同行显示
// $("div").load("index.xml work");//返回指定标签的数据
// $("div").load("index.xml", function(data){
// /*当用load调用回调函数时,this通常是指调用load方法的对象,data是指返回的数据对象*/
// console.log(data);
// $(this).css({"font-size": "28px", "color": "red"});//this是指div标签
// });
//获取json文件
// $("div").load("1.json", function(data){
// var obj = JSON.parse(data);
// $("div").empty()
// .append("<p>姓名:<span>" + obj.name + "</span></p>")
// .append("<p>工资:<span>" + obj.salary + "</span></p>")
// .append("<p>课程:<span>" + obj.lesson[0] + "</span></p>")
// .append("<p>网站:<span>" + obj.website.sitename + "</span></p>")
// .append("<p>域名:<span>" + obj.website.domain + "</span></p>");
// })
});
});
</script>
</head>
<body>
<button type="button" name="button">点击查看</button>
<div></div>
</body>
</html>
ajax内置get函数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my website</title>
<script src="../jquery.js"></script>
<script>
$(function(){
$("button").click(function(){
//服务器返回纯文本或者html
// $.get("1.php", function(data){
// $("div").html(data);
// })
//服务器返回xml文件
// $.get("1.php", function(data){
// var name = $(data).children("name").text();
// var lesson = $(data).children("lesson").text();
// var work = $(data).children("work").text();
// console.log(work);
// var html = "<p>" + name + "</p>" + "<p>" + lesson + "</p>" + "<p>" + work + "</p>";
// $("div").html(html);
// });
//服务器返回JSON格式数据
$.get("1.php", function(data){
var obj = JSON.parse(data);
console.log(obj);
$("div").empty().append("<p>" + obj.id + "</p>")
.append("<p>" + obj.name + "</p>")
.append("<p>" + obj.price + "</p>")
.append("<p>" + obj.area + "</P>");
})
});
});
</script>
</head>
<body>
<button type="button" name="button">点击查看</button>
<div></div>
</body>
</html>
Ajax中post方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery.js" ></script>
<script>
$(function(){
$("#username").change(function(event){
console.log("hello");
$.post("logincheck.php", {"name":$(this).val()},function(data){
$("#username").next().empty();
$("#username").after(data);
console.log(data);
});
});
});
</script>
</head>
<body>
<form action="logincheck.php" method="post">
<h2>用户登录</h2>
用户名称:<input type="text" name="username" id="username"/><br/>
用户密码:<input type="passwd" name="userpwd" id="userpwd"/><br/>
<input type="submit" name="submit" value="登录">
</form>
</body>
</html>
扫一扫
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
