jQuery基础与JavaScript与CSS交互-第五章

我不是女神ヾ 2021-09-16 00:24 243阅读 0赞

![标题图][1240]

## 目录 ##

1.  JavaScript框架种类及其优缺点
2.  jQuery库
3.  jQuery对象$
    
     *  掌握基本选择器
     *  掌握过滤选择器
     *  掌握表单选择器

## RIA技术 ##

常见的RIA技术  
\- Ajax  
\- Sliverlight  
\- Flex

## 什么是框架？ ##

框架是程序员将一个又一个功能进行封装，供其他人使用的程序组件，了解为模板而已。我们使用框架是为了简化开发进程。

## jQuery库文件 ##

导入：

> jquery-1.版本号.js（开发版）和 jquery-1.版本号.min.js（发布版）

## 第一个jQuery程序 ##

> $(document).ready()是整个运行的核心。

## 练习 ##

## jQuery选择器 ##

$("h2").css("background","#08F");

1.  类CSS选择器
2.  过滤选择器

## 基本选择器 ##

#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>兄弟元素

## 过滤选择器 ##

> 语法特点是使用“:”

分类如下：

*  基本 过滤选择器
 *  属性 过滤选择器
 *  子元素 过滤选择器
 *  可见性 过滤选择器
 *  内容 过滤选择器
 *  表单对象属性 过滤选择器
    
    1.  $(” li:first” )：选取所有
    2.  元素中的第一个
    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(1)” )：选取索引等于1的
    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

> 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的结果。

## 要求 ##

1.  选择器
2.  基本选择器
3.  层次选择器
4.  过滤选择器
5.  表单选择器

## 技能 ##

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

![图片][1240 1]

代码：

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

![图片][1240 2]

代码：

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

## JavaScript与CSS交互 ##

## Style属性 ##

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

## 常用事件 ##

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

## visibility ##

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

## JavaScript改变样式 ##

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

## 结语 ##

![送❤][1240 3]

[1240]: /images/20210724/a0b5f1034e5e4db9a67b2ce82e36ae41.png
[1240 1]: /images/20210724/574220a46b8541c68a7cbc19f9e7e00c.png
[1240 2]: /images/20210724/917cab2e2e06462d8784a2d724804010.png
[1240 3]: /images/20210724/e1007f309b434a85bf53b6a1bf559a41.png