威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / 编程 > 供其他人使用的程序组件

原标题:供其他人使用的程序组件

浏览次数:119 时间:2019-10-04

图片 1标题图

  1. JavaScript框架种类及其优缺点
  2. jQuery库
  3. jQuery对象$
  • 掌握基本选择器
  • 掌握过滤选择器
  • 掌握表单选择器

常见的RIA技术

  • Ajax
  • Sliverlight
  • Flex

框架是程序员将一个又一个功能进行封装,供其他人使用的程序组件,了解为模板而已。我们使用框架是为了简化开发进程。

导入:

<script src="js/jquery-1.11.3.js" type="text/javascript"></script>

jquery-1.版本号.js和 jquery-1.版本号.min.js

<script src="jquery-1.11.1.min.js"></script><script> $.ready(function(){ alert(“开启JQuery的学习之旅! ");});</script>

$.ready()是整个运行的核心。

<script type = "text/javascript"> function init(){ alert; alert; } $.ready; $().ready; $; $.ready(function(){ alert; alert; $().ready(function(){ alert; alert; $(function(){ alert; alert;</script>

$.css("background","#08F");
  1. 类CSS选择器
  2. 过滤选择器
#id $ id为test.class $ class为testelement $ 所有的<p>* $选取所有的元素

$(‘div span’):选取<div>里所有的元素$(‘div > span’):选取<div>下元素名是的子元素$(‘.one + div’):class为one的下一个<div>元素$(‘#two ~ div’):id为two的元素后面的所有<div>兄弟元素

语法特点是使用“:”

分类如下:

  • 基本 过滤选择器
  • 属性 过滤选择器
  • 子元素 过滤选择器
  • 可见性 过滤选择器
  • 内容 过滤选择器
  • 表单对象属性 过滤选择器
  1. $(" li:first" ):选取所有<li>元素中的第一个<li>元素
  2. $(" li:last" ):选取所有<li>元素中的最后一个<li>元素
  3. $(" li:even" ):选取索引为偶数的所有<li>元素
  4. $(" li:odd" ):选取索引为奇数的所有<li>元素
  5. $(" li:not" ):选取class不是three的元素
  6. $(":header" ):选取网页中所有标题元素
  7. $(":focus" ):选取当前获取焦点的元素
  8. $" ):选取索引等于1的<li>元素,eq-gt-lt,gt为大于,lt为小于。
<div >a</div>$("#id\#a");<div >b</div>$("#id\[3\]");
  1. :contains
  2. :empty
  3. :has
  4. :parent

选择器的书写规范很严格,多一个空格或少一个空格,都会影响选择器的结果。

  1. 选择器
  2. 基本选择器
  3. 层次选择器
  4. 过滤选择器
  5. 表单选择器

基本过滤选择器jQuery对象的clickjQuery对象的css选择器方法方法方法addClassmouseoutmouseover()方法

图片 2图片

代码:

<html><head><title>基本过滤选择器</title><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script></head><body><h2>用户交互设计学习参考书</h2><ul> <li>JavaScript DOM编程</li> <li>锋利的JQuery</li> <li>JQuery入门与提高</li> <li>JavaScript高级编程</li> <li>JQuery权威指南</li> <li>JQuery实战</li></ul></body></html>

图片 3图片

代码:

<html><head><title>可见性过滤选择器</title><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script></head><body><p>萝莉是什么意思?</p><div >萝莉是洛丽塔的缩写。“洛丽塔”原指1955年由俄裔美国作家的小说《洛丽塔》,或指小说中的女主角12岁的洛丽塔,后在日本引申发展成一种次文化,用来表示小女孩,或用在与其相关的事物,例如罗莉塔时装。第一个被世人公认的萝莉角色是1982年推出的《甜甜仙子》里的主角Momo公主。第一代萝莉萌王是《魔卡少女樱》里的主角木之本樱。</div></body></html>

“ul li:odd”选择列表ul中奇数项,用css()方法,设置背影判断class为tips,调用show()方法显示,调用hide()方法隐藏

<html><head><title>基本过滤选择器</title><script type="text/javascript" src="jquery-1.10.1.js"></script><style type="text/css"> #id1{ background: blue; } #div{ width: 500px; margin: 0px auto; }</style></head><body><div ><h2 >用户交互设计学习参考书</h2> <ul> <li>JavaScript DOM编程</li> <li>锋利的JQuery</li> <li>JQuery入门与提高</li> <li>JavaScript高级编程</li> <li>JQuery权威指南</li> <li>JQuery实战</li> </ul></div> <script type="text/javascript"> $.click(function(){ $lis = $("ul li:odd"); $lis.css("background","#ffe773"); }); </script></body></html>

<script type="text/javascript"> $tips = $; $tips.hide.click(function(){ if ($tips.is(":hidden")) { $tips.show(); }else{ $tips.hide;</script>

document.getElementById.style.color="#f00f00";

onclick单击onmouseover鼠标移到某元素之上onmouseout鼠标移开onmousedown鼠标被按下
  1. visible可见的
  2. hidden不可见的
  1. 使用style属性
  2. 使用className属性

小礼物走一走 or 点赞

图片 4送❤

本文由威尼斯888发布于计算机网络 / 编程,转载请注明出处:供其他人使用的程序组件

关键词:

上一篇:基本语法

下一篇:没有了