jQuery:（一）jQuery简介

标签：代码风格   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库分开发版和发布版

3、搭建jQuery使用环境

3.1 下载jQuery类库。

3.2 在页面中引入jQuery

四、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、方法举例

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

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

七、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>
    
    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