菜单

金沙国际jQuery基础与JavaScript与CSS交互-第陆章

2019年5月13日 - 金沙前端

金沙国际 1

目录

  1. JavaScript框架种类及其利弊
  2. jQuery库
  3. jQuery对象$

RIA技术

常见的RIA技术

怎么着是框架?

框架是技师将四个又一个功用拓展打包,供别的人使用的先后组件,通晓为模板而已。咱们采纳框架是为了简化开荒进程。

jQuery库文件

导入:

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>

jquery-1.版本号.js(开发版)和 jquery-1.版本号.min.js(发布版)

第一个jQuery程序

<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>

jQuery选择器

$("h2").css("background","#08F");
  1. 类CSS选择器
  2. 过滤选拔器

骨干选取器

#id $(‘#test’) id为test
.class $(“.test”) class为test
element $(‘p’) 所有的<p>
* $(‘*’)选取所有的元素

档期的顺序选取器

$(‘div span’):选取<div>里所有的元素
$(‘div > span’):选取<div>下元素名是的子元素
$(‘.one + div’):class为one的下一个<div>元素
$(‘#two ~ div’):id为two的元素后面的所有<div>兄弟元素

过滤选拔器

语法特点是应用“:”

分类如下:

  1. $(” li:first” ):选拔全体
  2. 要素中的第3个
  3. 元素
  4. $(” li:last” ):选取全体
  5. 要素中的最后二个
  6. 元素
  7. $(” li:even” ):选用索引为偶数的有着
  8. 元素
  9. $(” li:odd” ):接纳索引为奇数的具备
  10. 元素
  11. $(” li:not(.three)” ):选取class不是three的元素
  12. $(“:header” ):选择网页中有着标题成分
  13. $(“:focus” ):选拔当前拿到关节的因素
  14. $(“li:eq(一)” ):采纳索引等于一的
  15. 元素,eq-gt-lt,gt为大于,lt为小于。

特殊符号的转义

<div id="id#a">a</div>
$("#id\\#a");
<div id="id[3]">b</div>
$("#id\\[3\\]");

剧情过滤选拔器

  1. :contains(text)
  2. :empty
  3. :has(selector)
  4. :parent

选用器的书写标准很严酷,多3个空格或少二个空格,都会潜移默化选拔器的结果。

要求

  1. 选择器
  2. 骨干选拔器
  3. 档次选用器
  4. 过滤选取器
  5. 表单选拔器

技能

(一)基本过滤选用器
(2)jQuery对象的click()方法
(3)jQuery对象的css()方法
(4)选择器
(5)is()方法
(6)show()方法
(7)hide()方法
(8)addClass()方法
(9)mouseout()方法
(10)mouseover()方法

金沙国际 2

代码:

<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>

金沙国际 3

代码:

<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>

JavaScript与CSS交互

Style属性

document.getElementById("title").style.color="#f00f00";

常用事件

onclick单击
onmouseover鼠标移到某元素之上
onmouseout鼠标移开
onmousedown鼠标被按下

visibility

  1. visible可见的
  2. hidden不可知的

JavaScript更改样式

  1. 使用style属性
  2. 使用className属性

结语

金沙国际 4

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图