WEB从零学期记录--jquery0-入门
来源:互联网 发布:网络劫持 广告 编辑:程序博客网 时间:2024/06/04 19:33
1.安装jQuery、node.js.
(如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。)
菜鸟教程 CDN:
百度 CDN:
新浪 CDN:
Google CDN:
Microsoft CDN:
<head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script></head>
2.结合RUNOOB和w3school.入门jquery,从而更简单地入门js
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
Query 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
<script>$.noConflict();jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行!"); });});</script>
jQuery 事件函数
jQuery 是为事件处理特别设计的。
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
结论
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码
会更恰当且更易维护:
- 把所有 jQuery 代码置于事件处理函数中
- 把所有事件处理函数置于文档就绪事件处理器中
- 把 jQuery 代码置于单独的 .js 文件中
- 如果存在名称冲突,则重命名 jQuery 库
Query 事件
下面是 jQuery 中事件方法的一些例子:
如需完整的参考手册,请访问我们的 jQuery 事件参考手册。
3.用jQuery完成更加完整的任务
<html><head> <script type="text/javascript" src="jquery-3.1.1.js"></script><script type="text/javascript">$(document).ready(function(){$("button.bt").click(function(){$("p").css("background-color","red");$("#hidething").hide(); });});</script><script type="text/javascript">$(document).ready(function(){ $("button.togglebt").click(function(){$(".ex").toggle(1000); }); });</script><script type="text/javascript">$(document).ready(function(){$(".ex").hide();});</script><style type="text/css">div.ex{background-color:#e5eecc;padding:7px;border:solid 1px #c3c3c3;}</style></head><body><h2>This is a head</h2><p>this is s paragraph</p><p id="hidething">If you click,I will disappear.</p><button type="button" class="bt">Click me</button><h2>my favorite tv series<h2><div class="ex"><p>bojack horseman</p><p>you know it??</p></div><button type="button" class="togglebt">hide or show</button></body></html>
啊哈!去看SQL和PHP啦。
- WEB从零学期记录--jquery0-入门
- 记录我从零入门计算机视觉
- 前端零基础入门(一):从历史理解web前端
- 学习记录 web入门
- 《从零搭建SSH》:第一节 Web.xml
- 从零到精通web开发
- 从零搭建阿里云Web服务器
- ORACLE存储过程从零到入门
- Cocos2dx零基础从入门到精通
- 【零基础】HBase从学习入门开始
- 【零基础】PostgreSQL从入门到精通
- 这个学期考试记录
- WEB零基础开发-代码入门
- <记录>从零学数据结构算法——线性表
- 零基础Vue入门学习记录(1)
- 零基础Vue入门学习记录(2)
- java web从零单排第三期 《servlet》(1)
- java web从零单排第四期《servlet》(2)
- 查看 centos 的 distribution 版本号的各种方法
- java下载,文件名乱码
- python并发之multiprocessing
- ajax返回数据成功 却进入error方法
- (转)attrs.xml文件的属性解释
- WEB从零学期记录--jquery0-入门
- 一个简单的springboot的案例实现一个请求控制层返回一个JSON
- Spring 3.x企业开发(三)之AOP面向切面编程
- jq 筛选掉相似id的元素
- 寒假训练赛(三) 自我总结
- 【hibernate】 hibernate 注解之 SequenceGenerator
- 如何在一台windows主机上搭建mysql主从复制
- 套接字I/O
- Mybatis分库分表扩展插件