day20190911笔记

js_访问节点元素_document系列方法：

first_jQuery.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery使用</title>
</head>
<body>
</body>
<script src="js/jquery-1.11.0.js"></script>
<script>
/* jQuery加载页面 */
/*完整加载页面语法:*/
$(document).ready(function(){
alert("你好!jQuery");
});

/*简写加载页面语法 */
$(function(){
alert("再次你好!jQuery");
});

/* js加载页面
onload js的页面加载事件
* */
window.onload = function(){
alert(1);
}
window.onload = function(){
alert(2);
}
window.onload = function(){
alert(3);
}
</script>
</html>

jQuery选择器使用：

<!DOCTYPE html>

<html>

<head>

<title>jQuery选择器使用</title>

</head>

<body>

<p>课程体系有哪些?</p>

<ul>

<li>Java编程</li>

<li>JavaScript/jQuery</li>

<li>MySql</li>

<li>JavaWeb</li>

</ul>

</div>

</body>

/*加载网页*/

$(document).ready(function(){

/*js操作*/

//使用dom元素,获取js对象

var pDom = document.getElementsByTagName("p")[0].innerText;

//将获取的js对象赋值添加到 .dd中

document.getElementsByClassName("dd")[0].innerText = pDom;

/*jQuery操作*/

//使用jQuery选择器操作jQuery对象

/**

* text()/text("内容"): 无参则获取获取jQuery对象元素/有参则为设置jQuery对象元素内容

* 强调注意: jQuery对象方法和js对象的方法不能混用!!!

var $p = $("p").text();

$(".ddd").text($p);

});

</script>

</html>

jQuery选择器使用_基本选择器.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery选择器使用</title>
</head>
<body>

<div id="d">
<p>课程体系有哪些?</p>
<ul>
<li>Java编程</li>
<li>Html5+CSS3</li>
<li>JavaScript/jQuery</li>
<li>MySql</li>
<li>JavaWeb</li>
</ul>
</div>
<div class="dd"></div>
<div class="ddd"></div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
/*加载网页*/
$(document).ready(function(){
/*使用jQuery的基本选择器操作css样式
语法: 操作单个css属性
jQuery元素.css("css样式属性","css样式属性值");
* 操作多个css属性
* jQuery元素.css({"css样式属性1":"css样式属性值1","css样式属性2":"css样式属性值2"});
* */
/* 链式操作 */
$("#d").css("border","1px solid red").css("width","500px").css("margin","0px auto");
$("p").css({"font-size":"30px","color":"red"});
$(".dd,.ddd").css({"width":"100px","height":"100px","border":"1px solid green"});
});
</script>
</html>

jQuery选择器使用_层次选择器.html

<!DOCTYPE html>
<html>

<body>
<div class="over" style="">
<ul class="list_aa" style="left:0;" type="rollbox">
<li type="rollitem" dd_name="第1帧" style="">
<ul class="product_ul " id="component_852138__6407_6402_6394__6394" ddt-area="6394" dd_name="商品">
<li class="line1 " nname="book-104770-12627_2-698508_1" ddt-pit="1" dd_name="1">
<a title="遇见未知的自己（全新修订版）" class="img" href="http://product.dangdang.com/23927251.html" target="_blank"><img src="http://img3m1.ddimg.cn/40/17/23927251-1_l_14.jpg" alt="遇见未知的自己（全新修订版）"></a>
<p class="name" ddt-src="23927251">
<a title="遇见未知的自己（全新修订版）" href="http://product.dangdang.com/23927251.html" target="_blank">遇见未知的自己（全新修订版）</a>
</p>
<p class="author"><span class="author_t"></span>张德芬著，博集天卷出品</p>
<p class="price"><span class="rob"><span class="sign">¥</span><span class="num">19</span><span class="tail">.00</span></span><span class="price_r"><span class="sign">¥</span><span class="num">38</span><span class="tail">.00</span></span>
</p>
<div class="icon_pop"><span style="background: url(http://img4.ddimg.cn/00035/pic/xsq.png) no-repeat 0px 0px; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/xsq.png',sizingMethod='noscale');" class="product_tags"></span></div>
</li>
<li class="line2 " nname="book-104770-12627_2-698508_2" ddt-pit="2" dd_name="2">
<a title="做点自己看得上的事，爱些自己看得上的人" class="img" href="http://product.dangdang.com/25574732.html" target="_blank"><img src="http://img3m2.ddimg.cn/62/36/25574732-1_l_3.jpg" alt="做点自己看得上的事，爱些自己看得上的人"></a>
<p class="name" ddt-src="25574732">
<a title="做点自己看得上的事，爱些自己看得上的人" href="http://product.dangdang.com/25574732.html" target="_blank">做点自己看得上的事，爱些自己看得</a>
</p>
<p class="author"><span class="author_t"></span>陈默默著，紫云文心出品</p>
<p class="price"><span class="rob"><span class="sign">¥</span><span class="num">19</span><span class="tail">.10</span></span><span class="price_r"><span class="sign">¥</span><span class="num">45</span><span class="tail">.00</span></span>
</p>
<div class="icon_pop"><span style="background: url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0px 0px; _background-image: none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="product_tags"></span></div>
</li>
</ul>

</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script src="js/dd.js" type="text/javascript"></script>
</html>

jQuery选择器使用_属性选择器.html

<!DOCTYPE html>
<html>

<body>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />Hot
<input type="checkbox" name="newsletter" value="Cold Fusion" />Cold
<input type="date" name="accept" value="Evil Plans" />Evil
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
/* 匹配input标签中的type属性 */
var chs = $("input[type]");
console.log("匹配input标签中的type属性:")
console.log(chs);
//匹配input标签中的type中具体属性值 ***
var chss = $("input[type='checkbox']");
console.log("匹配input标签中的type中具体属性值");
console.log(chss);
});
</script>
</html>

------------------ - - - - - - - - - - - - ----------------------------------

js/dd.js

/*加载工厂函数/加载页面* */

$(document).ready(function(){

/* 使用jQuery的css样式,动态添加的行内样式 */

/* 基本选择器 _ 类选择器 */

$(".over").css({"width":"500px","border":"1px solid gray",

"margin":"0px auto","font-size":"12px"});

/*基本选择器 _ 标签选择器 */

$("ul").css("list-style","none");

/* 层次选择器_后代选择器 */

$(".over .product_ul").css("display","flex");

/* 层次选择器_子选择器 */

$(".list_aa>li").css("border","2px solid green");

});

js_访问节点元素.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js_访问节点元素</title>
</head>
<body>
<ul id="list">
<li>周一</li>
<li>周二</li>
<li>周三</li>
</ul>

element属性: 不会获取解析空格产生的文本节点元素
*
* */
/*访问ul标签下的第一个li标签元素*/
//通过节点属性firstChild获取指定元素下的第一个子节点,注意当前元素是节点元素还是文本元素
var first = document.getElementById("list").firstChild;
console.log(first);
console.log(first.innerText);

//通过element属性
var firstEle = document.getElementById("list").firstElementChild;
console.log(firstEle);
console.log(firstEle.innerText);
</script>
</html>

js_访问节点元素_document系列方法.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js_访问节点元素</title>
</head>
<body>
<ul id="list">
<li>周一</li>
<li>周二</li>
<li>周三</li>
</ul>

//通过标签选择器的方法将获取的firstText进行赋值
/* getElementById("id选择器名称"):根据指定的id选择器获取对应的元素内容,返回的是单个对象
*
* getElementsByTagName("标签名"):根据标签名获取对应的元素内容,返回的是一个集合对象
* getElementsByClassName("类样式名称"):根据class类样式获取对应的元素内容,返回的是一个集合对象
*/
document.getElementsByClassName("d")[0].innerText = firstEle;
document.getElementsByTagName("div")[0].innerText = firstText;
</script>
</html>

敢于接受，敢于面对，拥有一颗强大的内心。接受面对解决。活在当下，做好当下。反正迟早都要接受。理解知识。多敲

jQuery默写笔记：

1.jQuery:是基于js封装的类库,设计思想是: 写少量的代码,实现大量的功能;

jQuery封装了大量js的功能,使用jQuery能实现的,js一定能实现;
2.使用jQuery的步骤
　　一、引用jQuery的开发环境
　　二、加载网页元素
　　　　完整语法: $(document).ready(function(){
　　　　　　　　　　//js/jQuery 编码
　　　　　　　　　});
　　　　　　　　注: $ 在此处就是 jQuery
3.使用jQuery的选择器操作页面元素
语法: $(选择器).事件/动作();
　　基本选择器: 标签选择器 <div></div>
　　　　　　　　类选择器 .class
　　　　　　　　ID选择器 #id
　　　　　　　　并集选择器 .class,#id
　　　　　　　　全选选择器 *
　　层次选择器:
　　　　　　后代选择器 E F
　　　　　　子选择器 E>F
　　　　　　相邻元素选择器 E+F
　　　　　　同辈元素选择器 E~F
4.使用jQuery的基本选择器操作css样式
　　　　语法: 操作单个css属性
　　　　jQuery元素.css("css样式属性","css样式属性值");
　　　　操作多个css属性
　　　　jQuery元素.css({"css样式属性1":"css样式属性值1","css样式属性2":"css样式属性值2"});

day20190911笔记的更多相关文章

git-简单流程（学习笔记）
这是阅读廖雪峰的官方网站的笔记,用于自己以后回看 1.进入项目文件夹初始化一个Git仓库,使用git init命令. 添加文件到Git仓库,分两步: 第一步,使用命令git add <file ...
js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
SQL Server技术内幕笔记合集
SQL Server技术内幕笔记合集发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕笔记http://www.cnbl ...
PHP-自定义模板-学习笔记
1. 开始这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
PHP-会员登录与注册例子解析-学习笔记
1.开始最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
NET Core-学习笔记（三）
这里将要和大家分享的是学习总结第三篇:首先感慨一下这周跟随netcore官网学习是遇到的一些问题: a.官网的英文版教程使用的部分nuget包和我当时安装的最新包版本不一致,所以没法按照教材上给出的列 ...
springMVC学习笔记--知识点总结1
以下是学习springmvc框架时的笔记整理: 结果跳转方式 1.设置ModelAndView,根据view的名称,和视图渲染器跳转到指定的页面. 比如jsp的视图渲染器是如下配置的: <!-- ...
读书笔记汇总 - SQL必知必会（第4版）
本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...
2014年暑假c#学习笔记目录
2014年暑假c#学习笔记一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

随机推荐

建议收藏：.net core 使用导入导出Excel详细案例，精心整理源码已更新至开源模板
还记得刚曾经因为导入导出不会做而发愁的自己吗?我见过自己前同事因为一个导出改了好几天,然后我们发现虽然有开源的库但是用起来却不得心应手,主要是因为百度使用方案的时候很多方案并不能解决问题. 尤其是尝试 ...
暑期集训20190725 胜地不常(paradise)
[题目描述] 给定两个长度为n的非负整数数组a,b, [输入数据] 第一行一个整数n. 第二行n个整数a1~an. 第三行n个整数b1~bn. [输出数据] 一行一个整数表示答案. [样例输入] 4 ...
学习笔记47_关于Session局限性问题,Memcache
三大问题: 1.Session性能问题 2.不能稳定输出.考虑使用进程外Session 3.组成集群,登录数据进行共享 (比如说像百度,百度网盘,百度文库等是使用不同的服务机器的,怎样避免使用的时候不 ...
NOIP模拟 13
我终于又厚颜无耻地赖着没走 ...... T1 矩阵游戏用了30hmin找规律,然后发现貌似具有交换律,然后发现貌似有通项公式,然后发现貌似每次操作对通项的影响是相同的,然后发现貌似跟N没啥关系.. ...
重写（OverRide）/重载（Overload）
方法的重写规则参数列表必须完全与被重写方法的相同: 返回类型与被重写方法的返回类型可以不相同,但是必须是父类返回值的派生类(java5 及更早版本返回类型要一样,java7 及更高版本可以不同): ...
LocalDate类
LocalDate类与Date类不同.Date类是距离一个固定时间点的毫秒数(UTC 1970.1.1 00:00:00) Date类表示时间点,LocalDate类用来表示日历表示法. import ...
C# 获取系统当前登录用户(管理员身份运行同样有效)
今天学习下怎么用.Net获取系统当前登陆用户名,因为目前网上基本只有最简单的方式,但以管理员身份运行的话就会获取不到,所以特整理一下作为分享,最后附带参考文档,方便深究的童鞋继续学习. ======= ...
2019年PHP最新面试题（含答案）
1. 数据库设计经验,为什么进行分表?分库?一般多少数据量开始分表?分库?分库分表的目的?什么是数据库垂直拆分?水平拆分?分区等等一:为什么要分表当一张表的数据达到几百万时,你查询一次所花的时间会 ...
[RAM] FPGA的学习笔记——RAM
1.RAM——随机存取存储器, 分为SRAM和DRAM. SRAM:存和取得速度快,操作简单.然而,成本高,很难做到很大.FPGA的片内存储器,就是一种SRAM,用来存放程序,以及程序执行过程中,产生 ...
通过javascript 执行环境理解她
古往今来最难的学的武功(javascript)算其一. 欲练此功必先自宫,愿少侠习的此功,笑傲江湖. 你将了解执行栈(Execution stack) 执行上下文(Execution Context ...

day20190911笔记

day20190911笔记的更多相关文章

随机推荐

热门专题