我的HTML学习记录(七)

JQuery语法
*1.JQuery("选择器").action;通过选择器调用事件函数
* 但JQuery中,JQuery可以用$代替,即$("选择器").action();
* ①选择器,可以直接使用css选择器,选中元素
* ②.action()表示对元素执行的操作
*
* 2.文档就绪函数:防止了文档在完全加载(就绪)之前运行JQuery代码
* $(document).ready(function(){
JQuery代码
})简写:$(function(){});

* [文档就绪函数与window.onload区别]

* ①window.onload需在网页所有内容加载完成后执行(包括图片音频)
* 文档就绪函数,只需要网页DOM结构加载以后就可以执行

* ②window.onload只能写一个,写多个只能执行最后一个
* 文档就绪函数,可以写多个,也不会被覆盖

* 3.JQuery对象与原生DOM对象互转
* ①原生DOM对象转JQuery对象:$(DOM对象);
* var p = doucument.getElementsByTagName("p");
* $(p); //转换为JQuery对象

* ②JQuery对象转原生DOM对象:$("#p").get(0) $("#p")[0]
* $("#p").get(0).style.color ="red";

// 事件绑定快捷方式
/*$("button:first").click(function(){
alert(1);
});*/

/*
* 使用on绑定事件
*/

// ① 使用on进行单事件绑定
/*$("button").on("click",function(){
// $(this) 取到当前调用事件函数的对象
console.log($(this).html());
});*/

// ② 使用on同时为多个事件,绑定同一函数
/*$("button").on("mouseover click",function(){
console.log($(this).html())
})*/

// ③ 调用函数时,传入自定义参数
/*$("button").on("click",{name:"jianghao"},function(event){
// 使用event.data.属性名 找到传入的参数
console.log(event.data.name);
})*/

// ④ 使用on进行多事件多函数绑定
/*$("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseOver")
}
});*/

/* ⑤ 使用on进行事件委派
* >>> 将原本需要绑定到某元素上的事件,改为绑定在父元素乃至根节点上,然后委派给当前元素生效;
* eg:$("p").click(function(){});
* ↓
* $(document).on("click","p",function(){});
* >>> 作用:
* 默认的绑定方式,只能绑定到页面初始时已有的p元素,当页面新增p元素时,无法绑定到新元素上;
* 使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件
*
*
*/
/*$("button").on("click",function(){
var p = $("<p>444444</p>");
$("p").after(p);
});*/

/*$("p").click(function(){
alert(1);
});*/

/*$(document).on("click","p",function(){
alert(1);
});*/

/* off() 取消事件绑定
*
* 1. $("p").off(): 取消所有事件
* 2. $("p").off("click"): 取消点击事件
* 3. $("p").off("click mouseover"):取消多个事件
* 4. $(document).off("click","p"):取消事件委派
*
*/

/*
* 使用.one() 绑定事件,只能执行一次
*/
/*$("button").one("click",function(){
alert(1);
})*/

/* .trigger("event"):自动触发某元素的事件
*
* $("p").trigger("click",["haha","hehe"]); 触发事件时,传递参数
*/
/*$("p").click(function(event,arg1,arg2){
alert("触发了P的click事件"+arg1+arg2);
})

$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
})*/

.show():让隐藏元素显示,同时修改元素的宽度、高度、opacity属性
*
* ① 不传参:让隐藏的元素直接显示,不进行动画
* ② 传入时间:多少毫秒之内完成动画
* ③ 传入(时间,函数):完成动画之后,执行回调函数
*
* .hide():让显示元素隐藏,与show()相反;
*
*
*
* .slideDown(): 让隐藏元素显示,效果为从上往下,增加高度
* .slideUp(): 让显示的元素隐藏,效果从下往上,减小高度
* .slideToggle():让显示的隐藏,让隐藏的显示
*
*
* .fadeOut(): 让显示元素隐藏,淡出
* .fadeIn(): 让隐藏元素显示,淡入
* .fadeToggle(): 让显示的隐藏,让隐藏的显示。淡入淡出
* .fadeTo(时间,透明度,函数):同fadeToggle,但是多了透明度参数,可以指定显示的最终透明度
*
*
* .animate({最终的样式属性键值对},动画时间,动画效果("linear" "swing"),回调函数): 自定义动画

* HTTP:超文本传输协议。
*
* URL:统一资源定位符
* 组成: 协议名://主机名(IP地址):端口号/项目资源地址?传递参数键值对#锚点
* eg: http://127.0.0.1:8080/jd/index.html?name=jianghao
*
* localhost或127.0.0.1表示本机IP
*
*/

/* JSON 对象
*
* 1、JSON对象是键值对的集合,键与值之间用":"分隔,多个键值对之间,用","分隔

* 2、多个JSON对象,可以放到数组中去。JSON对象和数组,可以相互嵌套;
*
* JSON的键,必须是字符串。

*

时间: 2024-10-13 15:56:05

我的HTML学习记录(七)的相关文章

Oracle学习记录 七 继续接六的

下面是转换函数 to_char select to_char(sysdate,'yyyy') from dual; select to_char(sysdate,'fmyyyy-mm-dd') from dual; select to_char(sysdate,'yyyy-mm-dd') from dual; select to_char(sysdate, 'DDD') from dual;    一年中的第几天 select to_char(sysdate, 'DD') from dual; 

c++学习记录(七)

c++学习实践之重载 重载声明是指一个与之前已经在该作用域内声明过的函数或方法具有相同名称的声明,但是它们的参数列表和定义(实现)不相同 c++类中有重载运算符和重载函数 重载函数 声明多个相似但形式参数个数或者类型不同的函数,编译器通过把你所使用的参数类型与定义中的参数类型进行比较,决定选用最合适的定义. (1)例子 #include<iostream> using namespace std; class Num { public: void print(int a) { cout <

Python学习记录七---继承、多态和封装

1.创建类 创建文件 test7.py #! /usr/bin/env python class Person: def setName(self, name): self.name = name def getName(self): return self.name def greet(self): print "hello, world! I am %s."% self.name foo = Person() foo.setName('yilia') foo.getName() f

SpringMVC学习记录(七)--拦截器的使用

SpringMVC的请求如下面这种图所示: 可以看出所有的请求都要通过Dispatherservlet来接收,然后通过Handlermapping来决定使用哪个控制器,再根据ViewResolver来决定返回哪个视图.从流程来看,Handlermapping就是我们可以实现拦截器的第一种方法.另外还有一种是实现WebRequestInterceptor接口,或者继承其子类. 一.实现HandlerInterceptor接口 实现HandlerInterceptor接口或者继承HandlerInt

zeromq学习记录(七)订阅发布消息封装

之前也有提到 使用订阅发布 pub sub模式必须要显示定义ZMQ_SUBSCRIBE 只有以此模式定义的过滤字节开头的消息才会被订阅者收到 如果想收到所有信息 可定义subscriber.setsockopt(ZMQ_SUBSCRIBE, "", 0); 此类过滤器 示例很简单 我将示例代码发布者与订阅者整合到一个工程中 开启两个线程演示 上代码 // psenvpubsub.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h"

TMS320F28035学习记录七

1.一种处理器可以利用其外设(也可以认为是功能模块)去实现某种功能.具有相同功能的外设一般不止一个,如两个串口外设或6个ePWM外设等.但具有相同功能的外设,其寄存器组分配形式往往是很相似的,我们可以用位域结构体共用体结构体的方式去定义一个功能寄存器组类型,然后用这个自定义类型去定义一个外设. 2.定义每一个寄存器的位域结构体类型,然后用这个位域结构体类型结合整型定义一个共用体类型.用这种方式定义一个功能模块的所有寄存器组.最后采用共用体结构体方式定义一个寄存器组类型. 3.位域的定义必须从右往

Python学习记录-2016-11-29

今日学习记录: 心灵鸡汤: 要有合适自己的目标,一个目标一个目标实现,切忌好高骛远: 最好的投资就是投资自己: 实现梦想 学习,学习,再学习: Talk is cheap. 从本身而言,余三十而立之年,从事测试行业7七年有余,一年半华为外包路由器,两年无线wifi测试,一年半网管软件测试,一年自动化测试经理,推行公司自动化测试进程,从开始的TCL,到现在的python,工欲善其事必先利其器,所以自己来学习,总体我认为我的目标是一直前进的,不断变化的,但是方向并没有大的错误,有些累,所以近期有些懈

2014.6.4淘宝学习记录

今天主要认识了小柒.七念.圆影......体会了阿里人自己设计的chrome插件之UData.这是个很牛的插件,用于天猫和淘宝的数据分析,比如用户页面每个部位的点击量,同一IP的点击量,热度的显示,加入收藏夹.支付等数据,通过分析PV,UV,IPV便于他们后期页面的布局设计等.在学习体会的过程中,发现很多网站是内部开放,外部访问不了,体会到阿里巴巴学习内容的丰富性.下午4点多参与了有数的分析讨论会,感受到了团队的力量,每个人在开会期间,一有疑惑可以随时提出,然后进行讨论,各自说出自己的想法和改进

[ZHUAN]Flask学习记录之Flask-SQLAlchemy

From: http://www.cnblogs.com/agmcs/p/4445583.html Flask-SQLAlchemy库让flask更方便的使用SQLALchemy,是一个强大的关系形数据库框架,既可以使用orm方式操作数据库,也可以使用原始的SQL命令. Flask-Migrate 是一个数据迁移框架,需要通过Flask-script库来操作. 一.配置Flask-SQLAlchemy 程序使用的数据库地址需要配置在SQLALCHEMY_DATABASE_URI中,SQLALch

Git 学习(七)标签管理

Git 学习(七)标签管理 发布版本时,通常会先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.取出某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照. Git的标签虽然是版本库的快照,但其实它就是指向某个commit的指针(跟分支雷同,但分支可以移动,标签不可):创建和删除标签都是瞬间完成的. 本文具体说明 Git 中是如何创建标签及操作标签的. 创建标签 Git 标签的命令很简单,首先简单浏览下方的 Git 命令: git tag