jQuery笔记1--样式篇
来源:互联网 发布:txt文档编辑软件 编辑:程序博客网 时间:2024/06/05 18:22
1、要学习jQuery,首先学习环境搭建
相对来说,jQuery环境搭建是超级简单的,jQuery是一个javaScript脚本库,不需要特别的安装,只需要我们在<head>标签中,通过<script>标签来引入JQuery库即可。如下:
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <title>环境搭建</title></head> <body> <script type="text/javascript"> alert($) </script></body></html>
2、知识点:$(document).ready的作用
$(document).ready的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的被加载完毕后才能正确的使用。代码例子如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>第一个jQuery程序</title> <style type="text/css"> div { padding:8px 0px; font-size:12px; text-align:center; border:1px solid #888; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").html("Hello World!"); }) </script> </head> <body> <div> </div> </body></html>
3、知识点:jQuery对象与Dom对象
通过下面一个简单的例子,简单区分一下jQuery对象与Dom对象:
<p id=”myhtml”></p>
假如要获取页面中id为myhtml的p元素,然后给这个节点增加文字:good!!,并且设置文字颜色为红色。方法一:通过标准javaScript处理:
var p = document.getElementById('myhtml');p.innerHTML = 'good!!';p.style.color = 'red';
方法二:jQuery的处理:var $p = $('myhtml');$p.html('good!!').css('color','red');
通过上面标准的javaScript操作Dom与jQuery操作Dom的对比,可以发现:1、通过jQuery方法包装后的对象,是一个类数组对象。它与Dom对象完全不同,唯一相似的是它们都能操作Dom。2、通过jQuery处理Dom的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体指导哪个Dom节点有哪些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。4、知识点:jQuery对象如何转成Dom对象
jQuery是一个类数组对象,而Dom对象是一个单独的Dom元素,如何转换呢?代码例子如下:
<script type="text/javascript">var $div = $('div'); //jQuery对象 var div = $div.get(0);div.style.color = 'red'; //操作dom对象的属性 </script>
jQuery对象自身提供一个.get()方法允许我们直接访问jQuery对象中相关的Dom节点,get方法中提供一个元素的索引5、知识点:Dom对象又如何转成jQuery对象(开发中用得更多)
$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。如果传递给$(DOM)函数的参数时一个DOM对象,jQuery方法就会把这个DOM对象给包装成一个新的jQuery对象。实现代码例子如下:
javaScript代码:
var div = document.getElementsByTagName('div'); //dom对象var $div = $(div); //jQuery对象var $first = $div.first(); //找到第一个div元素$first.css('color', 'red'); //给第一个元素设置颜色
HTML代码:
<div>元素一</div><div>元素二</div><div>元素三</div>
通过getElementsByTagName获取到所有的div节点的元素,是一个Dom合集对象,通过$(div)方法转换成jQuery对象,通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。
总结:
1、环境搭建:
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
2、$(document).ready()作用:加载完某元素再进行指定操作$(document).ready(function(){ $("div").html("Hello World!"); })
3、jQuery对象与Dom对象var $p = $('myhtml');$p.html('good!!').css('color','red');
4、jQuery对象如何转成Dom对象
var $div = $('div'); //jQuery对象
var div = $div.get(0);div.style.color = 'red'; //操作dom对象的属性
5、Dom对象又如何转成jQuery对象(开发中用得更多)
var div = document.getElementsByTagName('div'); //dom对象var $div = $(div); //jQuery对象var $first = $div.first(); //找到第一个div元素$first.css('color', 'red'); //给第一个元素设置颜色
阅读全文
0 0
- jQuery笔记1--样式篇
- jQuery笔记--样式篇
- JQuery笔记10:JQuery 样式操作
- jquery 笔记集合1 选择器 CSS样式 函数 事件 节点
- jQuery基础-样式篇
- Jquery学习笔记——操作样式
- 【jQuery学习笔记--------操作类样式】
- 【jQuery学习笔记------操作样式表】
- 【jQuery学习笔记----操作样式表】
- jQuery基础教程笔记-样式和动画
- JQuery学习笔记8:JQuery之CSS样式控制
- jQuery基础(一)--样式篇
- 2、 jQuery选择器--样式篇
- 前端学习-jQuery学习小笔记(2)——jQ属性样式篇
- 1、jQuery对象与DOM对象--样式篇
- jquery 样式
- jquery样式
- JQuery 样式
- Ruby Gem 开发入门(一)
- Spring 依赖注入
- maven-javadoc插件避免thrift生成代码注释不完整
- FreeRTOS系列学习笔记三---FreeRTOS内核详解LIST(9.0版本)
- BZOJ 3643 Phi的反函数
- jQuery笔记1--样式篇
- PHPcms 缓存的读取和设置
- Mac上常用工具总结
- 基于Python结巴分词(调用自定义词库已经去除停用词)
- Trie(字典树)
- LeetCode 345 Reverse Vowels of a String
- 深入分析 Java 中的中文编码问题
- EF提示“序列化类型为XXX的对象时检测到循环引用”
- 笨办法学 Python · 续 练习 0:起步