内容复习串讲2-css&jquery

最新推荐文章于 2023-07-22 14:22:25 发布

zxfly6

最新推荐文章于 2023-07-22 14:22:25 发布

阅读量165

点赞数

CSS

层叠样式表：元素样式可以通过多种方式进叠加。

本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。

如何书写定义元素样式

在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做页面。
简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。

需要掌握的内容

DIV + CSS 布局基础，充分理解盒子模型
样式选择器：ID(#) Class(.) 标签（A DIV SPAN）

JavaScript

对于编程语言的认识：
一门成熟的编程语言应该具备：变量、数据类型、运算符、控制语句（顺序结构、分支结构、循环结构）、自成体系的 API。
JavaScript 的作用
1. 业务逻辑处理
2. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。

需要掌握的内容

JavaScript 是弱类型语言，而且书写是比较随意的。

弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。

   // 动态类型,随值的变化而变化
    var flag = 'abc';
    flag = 12;
    flag = true;
    flag = {name : 'Tom'};
    flag = function() {
        alert("Hello,JavaScript");
    }

关于 JavaScript 的判断条件

分支结构的三种表示方式 
三目运算符是需要熟练掌握的，其本质就是个表达式 
表达式是有有返回值（结果）的。

var age = 20;
var str = age >= 18 ? '成年' : '未成年';
console.log(str);

数据类型
数据类型其本质就是在内存中存储的结构是不一样的，在使用者看来，对于不同的业务需求，可以选用不同的数据类型定义变量。
1. 数值型（进度问题要注意，比如执行 0.1 + 0.2）
2. 字符型（拼接使用 +）
3. 布尔类型：0 和非 0 也能表现假和真
4. 对象类型：要充分理解下面一段代码的意思
5. 函数类型

    var obj = {
        name : 'Tom',
        age : 12,
        eat : function() {
            console.log('eat');
        }
    };
    console.log(typeof function() {});

    var login = function() {

        var tableinit = function() {
            console.log("tableinit");
        }

        return {
            init: function() {
                tableinit();
            }
        };
    }();

    login.init();

DOM 操作
1. 通过选择器定位元素（知道有相关的方法找到元素）
2. 对选择的元素进行处理

大部分的 DOM 处理时，围绕以下三种节点类型操作的

Element：各种HTML标签（比如:<body>,<h1>,<a>,<div>）;
Attibute：页面元素的属性（比如：id=”xxxx”,class=”xxx”,type=”text”）;
Text：标签之间或标签包含的文本；

DOM 的遍历
在 DOM 元素上定义 ID 属性，通过 ID 选择器查找（虽然在网页中允许重复 ID 的出现，但是要避免这种现象的出现）
ID 在定义的时候尽量要起的稍微复杂一点，满足一个标准的规范定义。
在一个元素范围内容查找元素，使用 jQuery 的 find 方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form id="form1">
            <input type="text" name="username" />
        </form>
        <form id="form2">
            <input type="text" name="username" />
        </form>
        <input type="button" value="click" onclick="show();" />
    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        function show() {
            var f1 = $("#form1").find("input[name='username']").val();
            var f2 = $("#form2").find("input[name='username']").val();
            console.log(f1));
            console.log(f2);
        }
    </script>
</html>

通过 Class 定位元素。

DOM 增加操作
添加一个 Element 节点
设置一个节点的样式属性
DOM 删除操作
删除一个 Element 节点，包括通过获取到父节点，删除其子节点。

JavaScript中方法的调用是不受方法定义中参数的约束。

jQuery

核心方法

$():
参数如果是字符串，此字符串代表选择器
参数如果是js元素对象，将其转变为 jQuery 对象
参数如果是一个方法，就是执行documentt.ready(),就绪化事件。
each(): 将 jQuery 选择的元素循环遍历。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
   <li>Coffee</li>
   <li>Milk</li>
   <li>Soda</li>
</ul>
</body>
</html>

注册一个 jQuery Plugin,用于扩展方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            label {
                display: block;
                margin: .5em;
            }
        </style>
    </head>
    <body>
        <label><input type="checkbox" name="foo"> Foo</label>
        <label><input type="checkbox" name="bar"> Bar</label>
        <input id="button" type="button" value="选中" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
            $(function() {
                $.fn.extend({
                    check: function() {
                        return this.each(function() {
                            this.checked = true;
                        });
                    },
                    uncheck: function() {
                        return this.each(function() {
                            this.checked = false;
                        });
                    }
                });

                $("#button").click(function() {
                    // 使用新创建的.check() 方法
                    $("input[type='checkbox']").check();
                });
            })
        </script>
    </body>
</html>

jQuery 选择器

ID #
CLASS .
标签标签名
find(‘选择器’)在一定 DOM 范围中选择

属性方法

attr() : 设置 DOM 属性

$(“#a1”).attr(“href”,”www.qq.com”);
addClass():添加样式
- html()

$("#adiv").html("<input type='button' value='btn' />"); // 添加一个按钮
$("#adiv").html(); // 取出adiv中的html代码，返回字符串

text():只是纯文本，不会解析为 html
val(): 取表单元素的值，比如input selcet…

zxfly6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容复习串讲2-css&jquery

CSS层叠样式表：元素样式可以通过多种方式进叠加。本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。如何书写定义元素样式在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做页面。简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自...
复制链接

扫一扫