码迷,mamicode.com
首页 > Web开发 > 详细

jQuery:(一)jQuery简介

时间:2017-08-08 15:31:48      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:代码风格   ack   title   压缩版   选择   版本   包括   jquery类库   get   

一、jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装。

二、jQuery的优势
1、强大的选择器。
2、出色的DOM封装。
3、可靠的事件处理机制。
4、出色的浏览器兼容性。
5、使用隐式迭代简化编程。
6、丰富的插件支持。
7、体积小,压缩后只有100KB左右。

三、下载和使用jQuery
1、下载
进入jQuery官网:http://jquery.com下载
2、jQuery库文件
jQuery库分开发版和发布版

名称 大小 说明
jquery-1.版本号.js(开发版) 约268kb 完整无压缩版本,主要用于测试、学习和开发。
jquery-1.版本号.min.js(发布版) 约91KB 经过工具压缩或经过服务器开启Gzip压缩,主要应用于发布的产品和项目。

3、搭建jQuery使用环境

3.1 下载jQuery类库。

3.2 在页面中引入jQuery

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

四、jQuery语法结构

语法:$(selector).action();

说明:

工厂函数$():将DOM对象转化为jQuery对象。
选择器 selector:获取需要操作的DOM元素。
方法action():jQuery中提供的方法,包括绑定事件处理的方法。

示例:

$("#current").addClass("current");   // id选择
$("input").addClass("current");     // 标签选择
$(".current").addClass("other");    // class类名选择

五、jQuery代码风格
1、$(selector).action();
$等同于"jQuery"
$(document).ready()等同于jQuery(document).ready()
2、方法举例

语法 说明
css("属性","属性值") 为元素设置CSS样式的值
addClass("类样式名") 为元素添加类样式
html("html代码") 为元素设置innerHTML的值

操作连缀书写:
$("h2").css("background-color","#CCFFFF").next().css("display","block");

六、$(document).ready()
$(document).ready()与window.onload类似,但也有区别:

  window.onload $(document).ready()
执行时机 必须等待网页中所有的内容加载完毕后(包括图片、视频等)才能执行 网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、视频等)并没有加载完
编写次数 同一页面不能同时编写多个 同一页面能同时编写多个
简化写法 $(function(){
   //执行代码
});

七、jQuery对象和DOM对象
1、DOM对象:直接使用JavaScript获取的节点对象
   var objDOM=document.getElementById("title");
   var objHTML=objDOM.innerHTML;
2、jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法:
   $("#title").html()
   等同于
   document.getElementById("title").innerHTML;
提示:DOM对象和jQuery对象分别拥有一套独立的方法,不能混用。

3、jQuery对象转DOM对象

jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象
示例:
var $txtName=$(".txtName");    //jQuery对象
var txtName=$txtName[0];       //DOM对象
通过get(index)方法得到相应的DOM对象
示例:
var $txtName=$(".txtName");    //jQuery对象
var txtName=$txtName.get(0);   //DOM对象

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jQuery对象转化成DOM对象</title>
    <style type="text/css">
        p{
            display: none;;
        }

        .show{
            display: block;
        }
    </style>
    <!--引入jQuery类库-->
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
            var $txtname=$(".txtName"); //获取jQuery对象
         var txtname=$txtname[0]; //获取DOM对象

         console.log($txtname);
         console.log(txtname);
       });
    </script>
</head>
<body >
    <p id="title">
      <a href="hello world"></a>
    </p>

    <div class="txtName">
        111111111
    </div>
</body>
      
</html>

 

4、DOM对象转jQuery对象

使用$()函数进行转换:$(DOM对象)
示例:
var txtName=document.getElementById("txtName");   //DOM对象
var $txtName=$(txtName);                          //jQuery对象
注意:
1、jQuery对象命名一般约定以$开头。
2、常使用$(this)来获取触发该事件的当前jQuery对象。

jQuery:(一)jQuery简介

标签:代码风格   ack   title   压缩版   选择   版本   包括   jquery类库   get   

原文地址:http://www.cnblogs.com/dotnet261010/p/7306584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!