web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

保持学习数量和质量

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>

----操作元素的内容

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

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

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

----操作元素的样式

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

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

----移除属性和样式

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

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

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

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

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

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

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

$(content).appendTo(selector)

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

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

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

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

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

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

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

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

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

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

$(selector).clone()

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

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

----替换内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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\n";
}
}
//实例化
$jordan=new nbaPlayer();
//调用对象的属性和方法
echo $jordan->name."\n";
$jordan->run();

----构造函数

__construct

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

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

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

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

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

$jordan->run();

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

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

----析构函数

__destruct()

写入析构函数后，

function __destruct(){
echo "destructing\n";
}

结果如下

constructing Jordan Running constructing destructing destructing

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

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

一般用于清理使用的资源

----对象引用

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

$james2=&$james;

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

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记的更多相关文章

JS/JQuery操作DOM元素笔记
原因自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...
JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
jquery 操作DOM元素(1)
.clone() 创建一个匹配的元素集合的深度拷贝. .clone([withDataAndEvents]) withDataAndEvents (默认为false) 一个Boolean 表示是否会复 ...
js进阶 11-14 jquery如何实现元素的替换和遍历
js进阶 11-14 jquery如何实现元素的替换和遍历一.总结一句话总结:替换:replaceAll() 与 replaceWith().遍历:each(). 1.replaceAll() ...
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
【面试必备】javascript操作DOM元素
前言时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置一.总结一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
跨frame操作dom元素
今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...

随机推荐

liMarquee演示12种不同的无缝滚动效果
很实用的一款liMarquee演示12种不同的无缝滚动效果在线预览下载地址实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...
8种效果实例-jQuery anoSlide 焦点图轮播
anoslide是一款可调节效果至任意宽度大小,支持图文混合内容显示的图片轮播插件. 在线实例单个多个动画延迟自动播放显示分页显示标题延迟加载自适应高度使用方法 <div cl ...
【移动适配】一个像素的border怎么实现
一个像素里复杂纷扰的世界文 | 啃先生 Mar.3rd.2016 首发于微信公众号(啃先生) 上一篇发了<[移动适配]移动Web怎么做屏幕适配> 壹 | Fisrt 在CSS的世界里P ...
CSS基础教程 -- 媒体查询屏幕适配
响应式布局 Media Query 的使用方法在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...
npm 安装 ionic cordova
针对npm安装 ionic 和 cordova 过程很慢,且有些安装文件被墙的问题,使用如下方式解决: 1)安装cnpm npm install -g cnpm 2)然后再使用cnpm 安装 ioni ...
.NET破解之图片下载器
自去年五月加入吾爱后,学习了三个月,对逆向破解产生了深厚的兴趣,尤其是对.NET方面的分析:但由于这一年,项目比较忙,事情比较多,破解这方面又停滞了许久,不知道还要好久. 前些天,帮忙批量下载QQ相册 ...
Emacs学习心得之基础配置
作者:枫雪庭出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 Emacs学习心得之基础配置 1.前言2.基础配置一.前言本篇博文记录了Emacs的一 ...
最全面的NSDateHelper 分享
NSDateUtil 分享 (ios开发交流群:486468672) 代码下载:https://github.com/foxswang/NSDateUtil 史上最全面NSDate Utility 没 ...
【网络编程】Socket概念及简单聊天…
Socket(套接字) * Socket就是为网络服务提供的一种机制 * 通信的两端都是Socket * 网络通信其实就是Socket间的通信 * 数据在两个Socket间通过IO传输我们来看看下面 ...
iOS开发--Swift 如何完成工程中Swift和OC的混编桥接(Cocoapods同样适用)
由于SDK现在大部分都是OC版本, 所以假如你是一名主要以Swift语言进行开发的开发者, 就要面临如何让OC和Swift兼容在一个工程中, 如果你没有进行过这样的操作, 会感觉异常的茫然, 不用担心 ...

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记的更多相关文章

随机推荐

热门专题