标签:判断 jquery基础 元素 tle tps 发展 改变样式 小说 方法
常见的RIA技术
框架是程序员将一个又一个功能进行封装,供其他人使用的程序组件,了解为模板而已。我们使用框架是为了简化开发进程。
导入:
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>
jquery-1.版本号.js(开发版)和 jquery-1.版本号.min.js(发布版)
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
alert(“开启JQuery的学习之旅! ");
});
</script>
$(document).ready()是整个运行的核心。
<script type = "text/javascript">
function init(){
alert(1);
alert(2);
}
$(document).ready(init);
$().ready(init);
$(init);
$(document).ready(function(){
alert(11);
alert(12);
});
$().ready(function(){
alert(11);
alert(12);
});
$(function(){
alert(11);
alert(22);
});
</script>
$("h2").css("background","#08F");
#id $(‘#test’) id为test
.class $(“.test”) class为test
element $(‘p’) 所有的<p>
* $(‘*’)选取所有的元素
$(‘div span’):选取<div>里所有的<span>元素
$(‘div > span’):选取<div>下元素名是<span>的子元素
$(‘.one + div’):class为one的下一个<div>元素
$(‘#two ~ div’):id为two的元素后面的所有<div>兄弟元素
语法特点是使用“:”
分类如下:
<div id="id#a">a</div>
$("#id\\#a");
<div id="id[3]">b</div>
$("#id\\[3\\]");
选择器的书写规范很严格,多一个空格或少一个空格,都会影响选择器的结果。
(1)基本过滤选择器
(2)jQuery对象的click()方法
(3)jQuery对象的css()方法
(4)选择器
(5)is()方法
(6)show()方法
(7)hide()方法
(8)addClass()方法
(9)mouseout()方法
(10)mouseover()方法
代码:
<html>
<head>
<title>基本过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js">
</script>
</head>
<body>
<h2>用户交互设计学习参考书</h2>
<ul>
<li>JavaScript DOM编程</li>
<li>锋利的JQuery</li>
<li>JQuery入门与提高</li>
<li>JavaScript高级编程</li>
<li>JQuery权威指南</li>
<li>JQuery实战</li>
</ul>
</body>
</html>
代码:
<html>
<head>
<title>可见性过滤选择器</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p>萝莉是什么意思?</p>
<div class="tips">
萝莉是洛丽塔的缩写。“洛丽塔”原指1955年由俄裔美国作家的小说《洛丽塔》,或指小说中的女主角12岁的洛丽塔,后在日本引申发展成一种次文化,用来表示小女孩,或用在与其相关的事物,例如罗莉塔时装。第一个被世人公认的萝莉角色是1982年推出的《甜甜仙子》里的主角Momo公主。第一代萝莉萌王是《魔卡少女樱》里的主角木之本樱。
</div>
</body>
</html>
“ul li:odd”选择列表ul中奇数项,用css()方法,设置背影
判断class为tips,调用show()方法显示,调用hide()方法隐藏
<html>
<head>
<title>基本过滤选择器</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<style type="text/css">
#id1{
background: blue;
}
#div{
width: 500px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="div">
<h2 id="id1">用户交互设计学习参考书</h2>
<ul>
<li>JavaScript DOM编程</li>
<li>锋利的JQuery</li>
<li>JQuery入门与提高</li>
<li>JavaScript高级编程</li>
<li>JQuery权威指南</li>
<li>JQuery实战</li>
</ul>
</div>
<script type="text/javascript">
$("#id1").click(function(){
$lis = $("ul li:odd");
$lis.css("background","#ffe773");
});
</script>
</body>
</html>
<script type="text/javascript">
$tips = $(".tips");
$tips.hide();
$("p").click(function(){
if ($tips.is(":hidden")) {
$tips.show();
}else{
$tips.hide();
}
});
</script>
document.getElementById("title").style.color="#f00f00";
onclick单击
onmouseover鼠标移到某元素之上
onmouseout鼠标移开
onmousedown鼠标被按下
标签:判断 jquery基础 元素 tle tps 发展 改变样式 小说 方法
原文地址:https://www.cnblogs.com/dashucoding/p/9413074.html