zoukankan      html  css  js  c++  java
  • web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi

    保持学习数量和质量

    1、jQuery操作DOM元素

    ----使用attr()方法控制元素的属性

    attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。

    控制就是获取以及设置

    <h3>attr()方法设置元素属性</h3>
    <a href="http://127.0.0.1" id="a1">点我就变</a>
    <div>我改变后的地址是:<span id="tip"></span></div>

    <script type="text/javascript">
    $("#a1").attr("href","www.imooc.com");
    var $url = $("#a1").attr("href");
    $("#tip").html($url);
    </script>

    ----操作元素的内容

    使用html()text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。

    使用方法与attr()略有不同,但作用基本相同

    <h3>html()和text()方法设置元素内容</h3>
    <div id="html"></div>
    <div id="text"></div>

    <script type="text/javascript">
    var $content = "<b>唉,我又变胖了!</b>";
    $("#html").html($content);
    $("#text").text($content);
    </script>

    ----操作元素的样式

    通过addClass()css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。

    <body>
    <h3>css()方法设置元素样式</h3>
    <div id="content">我穿了一件红色外衣</div>

    <script type="text/javascript">
    $("#content").css({"background-color":"red","color":"#fff"}) ;
    </script>
    </body>

    ----移除属性和样式

    使用removeAttr(name)removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名

    <body>
    <h3>removeClass()方法移除元素样式</h3>
    <div id="content" class="blue white">我脱下了一件蓝色外衣</div>

    <script type="text/javascript">
    $("#content").removeClass("blue white");
    </script>
    </body>

    ----使用append()方法向元素内追加内容

    append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。

    <body>
    <h3>append()方法追加内容</h3>

    <script type="text/javascript">
    function rethtml() {
    var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
    return $html;
    }
    $("body").append(rethtml());
    </script>
    </body>

    ----使用appendTo()方法向被选元素内插入内容

    appendTo()方法也可以向指定的元素内插入内容,它的使用格式是:

    $(content).appendTo(selector)

    参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。

    <body>
    <h3>appendTo()方法插入内容</h3>
    <div>
    <span class="green">小乌龟</span>
    </div>

    <script type="text/javascript">
    var $html = "<span class='red'>小青蛙</span>"
    $($html).appendTo("div");
    </script>
    </body>

     注意这里的div若换为.red,效果会有不同,自行实验以及思考吧。

    ----使用before()和after()在元素前后插入内容

    使用before()after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容,调用格式分别为:

    $(selector).before(content)$(selector).after(content)

    其中参数content表示插入的内容,该内容可以是元素或HTML字符串。

    <body>
    <h3>after()方法在元素之后插入内容</h3>
    <span class="green">我们交个朋友吧!</span>

    <script type="text/javascript">
    var $html = "<span class='red'>兄弟。</span>"
    $("span").after($html);
    </script>
    </body>

    ----使用clone()方法复制元素

    调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:

    $(selector).clone()

    其中参数selector可以是一个元素或HTML内容。

    <body>
    <h3>使用clone()方法复制元素</h3>
    <span class="red" title="hi">我是美猴王</span>

    <script type="text/javascript">
    $("body").append($("span").clone());
    </script>
    </body>

    ----替换内容

    replaceWith()replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:

    $(selector).replaceWith(content)$(content).replaceAll(selector)

    参数selector为被替换的元素,content为替换的内容。

    <body>
    <h3>使用replaceAll()方法替换元素内容</h3>
    <span class="green" title="hi">我是屌丝</span>

    <script type="text/javascript">
    var $html = "<span class='red' title='hi'>我是土豪</span>";
    $($html).replaceAll("span");
    </script>
    </body>

    ----使用wrap()和wrapInner()方法包裹元素和内容

    wrap()wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:

    $(selector).wrap(wrapper)$(selector).wrapInner(wrapper)

    参数selector为被包裹的元素,wrapper参数为包裹元素的格式。比如<div></div>

    <body>
    <h3>使用wrapInner()方法包裹元素</h3>
    <span class="red" title='hi'>我的身体有点歪</span>

    <script type="text/javascript">
    $(".red").wrapInner("<i></i>");
    </script>
    </body>

    ----使用each()方法遍历元素

    使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:

    $(selector).each(function(index))

    参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。

    <body>
    <h3>使用each()方法遍历元素</h3>
    <span class="green">香蕉</span>
    <span class="green">桃子</span>
    <span class="green">葡萄</span>
    <span class="green">荔枝</span>

    <script type="text/javascript">
    $("span").each(function (index) {
    if (index == 1) {
    $(this).attr("class", "red");
    }
    });
    </script>
    </body>

    ----使用remove()和empty()方法删除元素

    remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。

    <body>
    <h3>使用empty()方法删除元素</h3>
    <span class="green">香蕉</span>
    <span class="green">桃子</span>
    <span class="green">葡萄</span>
    <span class="green">荔枝</span>

    <script type="text/javascript">
    $("span").empty(".green");
    </script>
    </body>

    2、MySQL

    -----操作数据表中的记录-----

    mysql> CREATE TABLE users(
    -> id SMALLINT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
    -> username VARCHAR(20) NOT NULL,
    -> password VARCHAR(32) NOT NULL,
    -> age SMALLINT NOT NULL DEFAULT 10,
    -> sex BOOLEAN
    -> );

    ----插入记录INSERT

    INSERT tbl_name [(col_name)] {VALUES|VALUE}...

    若省略字段,则对所有字段进行赋值操作。若此时想保持主键的递增,主键的VALUE写为NULL/DEFAULT即可。而且,省略字段时,必须且只能对所有赋值,每一个字段都要赋值,若不匹配会报错

    mysql> INSERT users VALUES(NULL,'Tom','123',23,1);

    赋值可以写值,也可以写函数,或者默认值。这里插入多个值为例。

    mysql> INSERT users VALUES(NULL,'Tom','123',23,1),(NULL,'Rose',md5('123'),DEFAULT,0);

    mysql> SELECT * FROM users;
    +----+----------+----------------------------------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------------------------------+-----+------+
    | 1 | Tom | 123 | 23 | 1 |
    | 2 | Tom | 123 | 23 | 1 |
    | 3 | Rose | 202cb962ac59075b964b07152d234b70 | 10 | 0 |
    +----+----------+----------------------------------+-----+------+

    ----其他插入记录的方法

    --INSERT.. SET 

    与INSERT不同的在于可以进行子查询(SubQuery);且每次只能插入一条记录

    INSERT tbl_name 

    mysql> INSERT users SET username='Ben',password='323';

    由于其他字段有默认或者非空,所以这样写没错。

    --INSERT...SELECT

    ----更新(单表更新)UPDATE

    类似INSERT...SET...的书写方式

    mysql> UPDATE users SET age=age+5;

    mysql> SELECT * FROM users;
    +----+----------+----------------------------------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------------------------------+-----+------+
    | 1 | Tom | 123 | 28 | 1 |
    | 2 | Tom | 123 | 28 | 1 |
    | 3 | Rose | 202cb962ac59075b964b07152d234b70 | 15 | 0 |
    | 4 | Ben | 323 | 15 | NULL |
    +----+----------+----------------------------------+-----+------+

    此时更新所有列。

    若想更新某些列,要用到条件

    mysql> UPDATE users SET age=age+10 WHERE id%2=0;

    这里的意思是把偶数id的age加10的操作

    ----删除记录(单表删除)DELETE

    DELETE FROM tbl [WHERE ...]

    注意删除后再插入的id变化

    mysql> DELETE FROM users WHERE id=2;
    Query OK, 1 row affected (0.01 sec)

    mysql> SELECT * FROM users;
    +----+----------+----------------------------------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------------------------------+-----+------+
    | 1 | Tom | 123 | 27 | 0 |
    | 3 | Rose | 202cb962ac59075b964b07152d234b70 | 12 | 0 |
    | 4 | Ben | 323 | 21 | 0 |
    +----+----------+----------------------------------+-----+------+
    3 rows in set (0.00 sec)

    mysql> INSERT users SET username='Ben',password='323';
    Query OK, 1 row affected (0.01 sec)

    mysql> SELECT * FROM users;
    +----+----------+----------------------------------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------------------------------+-----+------+
    | 1 | Tom | 123 | 27 | 0 |
    | 3 | Rose | 202cb962ac59075b964b07152d234b70 | 12 | 0 |
    | 4 | Ben | 323 | 21 | 0 |
    | 5 | Ben | 323 | 10 | NULL |
    +----+----------+----------------------------------+-----+------+

    id号是自动增加,而不是智能的填补,请注意。

    ----查询SELECT

    对于数据库最多应用的语句。比如之前见过的SELECT * FROM users;

    --查询表达式

    每一个表达式表示想要的一列,必须有且至少有一个;

    多个列之间以,分隔

    *表示所有列。tbl_name.*可以表示命名表的所有列;

    mysql> SELECT id,username FROM users;

    也可以改变顺序来显示

    mysql> SELECT username,id FROM userS;
    +----------+----+
    | username | id |
    +----------+----+
    | Tom | 1 |
    | Rose | 3 |
    | Ben | 4 |
    | Ben | 5 |
    +----------+----+

    为了以后多表查询的方便,“全”查询这样写

    mysql> SELECT users.id,users.username FROM users;

    --赋予别名

    mysql> SELECT id AS userid,username AS uname FROM users;
    +--------+-------+
    | userid | uname |
    +--------+-------+
    | 1 | Tom |
    | 3 | Rose |
    | 4 | Ben |
    | 5 | Ben |
    +--------+-------+

    数据表中的名称其实没有变

    ----WHERE条件

    添加删除一般要加,不然就是对所有记录的操作;WHERE表达式中支持函数或运算符

    ----GROUP BY查询结果分组

    ASC升序, DESC降序

    mysql> SELECT sex FROM users GROUP BY sex;
    +------+
    | sex |
    +------+
    | NULL |
    | 0 |
    +------+
    2 rows in set (0.01 sec)

    mysql> SELECT sex FROM users GROUP BY age ASC;
    +------+
    | sex |
    +------+
    | NULL |
    | 0 |
    | 0 |
    | 0 |
    +------+

    ----having分组条件

    mysql> SELECT sex,age FROM users GROUP BY sex HAVING age>20;
    +------+-----+
    | sex | age |
    +------+-----+
    | 0 | 27 |
    +------+-----+

    注意having语句中的字段必须出现在select中,或者就干脆是个聚合函数(max等)

    ----查询结果进行排序ORDER BY

    类似GROUP BY

    mysql> SELECT * FROM users ORDER BY age,id DESC;

    +----+----------+----------------------------------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------------------------------+-----+------+
    | 5 | Ben | 323 | 10 | NULL |
    | 3 | Rose | 202cb962ac59075b964b07152d234b70 | 12 | 0 |
    | 4 | Ben | 323 | 21 | 0 |
    | 1 | Tom | 123 | 27 | 0 |
    +----+----------+----------------------------------+-----+------+

    注意这里排序的标准给了不止一个,则先按照age进行默认的升序,若遇到相同的,则再按照id对相同的进行降序排列

    ----LIMIT限制返回数量

    mysql> SELECT * FROM users LIMIT 2,2;
    +----+----------+----------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------+-----+------+
    | 4 | Ben | 323 | 21 | 0 |
    | 5 | Ben | 323 | 10 | NULL |
    +----+----------+----------+-----+------+

    需要注意的是若只写一个数字2,是说从头算起的两个;这里的2,2是指,从第三条开始返回两条,因为排列是默认从0开始的,所以这里是第三条开始。

    另外,限制的顺序与id没有关系

    mysql> SELECT * FROM users ORDER BY id DESC LIMIT 2;
    +----+----------+----------+-----+------+
    | id | username | password | age | sex |
    +----+----------+----------+-----+------+
    | 5 | Ben | 323 | 10 | NULL |
    | 4 | Ben | 323 | 21 | 0 |
    +----+----------+----------+-----+------+

    ----学习了SELECT之后

    mysql> INSERT test(username) SELECT username FROM users WHERE age>=20;

    mysql> SELECT * FROM test;
    +----+----------+
    | id | username |
    +----+----------+
    | 1 | Tom |
    | 2 | Ben |
    +----+----------+

    就可以定向的查找并写入

    ----小结

    记录操作:增更删查

    INSERT,UPDATE,DELETE,SELECT

    3、面向对象

     -----基本实践-----

    ----类的概念

    类可以看作是“一类人”,具有相同的“属性”和“方法”(但相对应的值不一定相同);

    属性,是类的固有性质

    方法,是类的“动作”

    类的对象称为类的实例化——对象就是属于类的某一个个体,类的具体化

    类的属性和方法是类成员

    ----类的实例化

    用具体的数据填满类的框架

    <?php
    /*
    * 面对对象的学习记录用代码
    */
    //定义类
    class nbaPlayer{
    public $name="Jordan";
    public $height="198cm";
    public $team="Bull";

    public function __construct(){

    }

    public function run(){
    echo "Running ";
    }
    }
    //实例化
    $jordan=new nbaPlayer();
    //调用对象的属性和方法
    echo $jordan->name." ";
    $jordan->run();

    ----构造函数

    __construct

    默认调用,可以自定义来给出类的默认值

    使用方法是在函数中写入变量,实例化的时候要给值

    <?php
    /*
    * 面对对象的学习记录用代码
    */
    //定义类
    class nbaPlayer{
    public $name;
    public $height;
    public $team;

    public function __construct($name,$height,$team){
    echo "constructing ";//判断是否调用了构造函数
    $this->name=$name; //在方法中用$this伪变量来传递参数
    $this->height=$height;
    $this->team=$team;
    }

    public function run(){
    echo "Running ";
    }
    }
    //实例化
    $jordan=new nbaPlayer("Jordan","198cm","Bull");
    //调用对象的属性和方法
    echo $jordan->name." ";

    $jordan->run();

    $james=new nbaPlayer("James", "197cm", "Heat");

    注意这里会输出两次构造函数。也就是说,每一次实例化都会调用一次构造函数。

    ----析构函数

    __destruct()

    写入析构函数后,

    function __destruct(){
    echo "destructing ";
    }

    结果如下

    constructing Jordan Running constructing destructing destructing

    也就是说,析构函数会在程序结束的时候自动调用

    或者,把实例化的对象赋值为null时也会调用析构函数

    一般用于清理使用的资源

    ----对象引用

    //对象的引用
    $james1=$james;

    $james2=&$james;

    其中,有&的引用,两个对象的变化是同步的,可以看作是一种映像。具体可以用上面提到的析构函数来简单的验证。

  • 相关阅读:
    LOJ 3055 「HNOI2019」JOJO—— kmp自动机+主席树
    LOJ 2586 「APIO2018」选圆圈——KD树
    bzoj 3600 没有人的算术——二叉查找树动态标号
    bzoj 1257 余数之和 —— 数论分块
    bzoj 3998 弦论 —— 后缀自动机
    bzoj 2946 公共串 —— 后缀自动机
    bzoj 4032 [ HEOI 2015 ] 最短不公共子串 —— 后缀自动机+序列自动机
    bzoj 2555 SubString —— 后缀自动机+LCT
    洛谷 P3804 [模板] 后缀自动机
    洛谷 P4106 / bzoj 3614 [ HEOI 2014 ] 逻辑翻译 —— 思路+递归
  • 原文地址:https://www.cnblogs.com/andy1202go/p/4933713.html
Copyright © 2011-2022 走看看