jquery的学习

jQuery 元素选择器和属性选择器允许您通过标签名、属性名对 HTML 元素进行选择。

选择器允许你对 HTML 元素或单个元素进行操作：

<button class="test">点击</button>

$(".test").click(function(){        //选取class属性为test的标签
    alert(111);
});

$()                                 //这就是jQuery选择器

点击按钮之后会跳出一个弹窗，输出111。

css(); 访问匹配元素的样式属性。

//取得p标签的color样式属性的值
$("p").css("color");


//将所有段落的字体颜色设为红色并且背景为蓝色
$("p").css({ "color": "#ff0011", "background": "blue" });

html(); 取得第一个匹配元素的html内容。

//返回p元素的内容
$("p").html();

//设置所有p元素的内容
$("p").html("Hello <b>world</b>!");

find(); 搜索所有与指定表达式匹配的元素。

<p><span>Hello</span>,how are you</p>
<p>Me? I'm<span>good</span>.</p>

//搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
$("p").find("span").css('color', 'red');

//输出结果是Hello和good的字体颜色是红色

eq(x); 选取索引为x的元素，x从0开始。

<p>This is just a test.</p>
<p>So is this</p>

//将HTML代码中所有p标签中索引为1的代码中的字体设置为红色
$("p").eq(1).css("color", "red");

hide(); 隐藏显示的元素。

<p> This is just a test.</p>
	<p> So is this</p>

//将所有p标签都隐藏掉
$("p").hide();

页面上不显示p标签中的内容

show(); 将display属性为none的标签显示在页面上。

<p style="display:none;"> This is just a test.</p>
<p> So is this</p>

$("p").show();

//未执行本段代码之前不显示第一段p标签中的内容，执行本段代码之后，第一段p标签中的内容显示在页面上

$.ajax(); 通过 HTTP 请求加载远程数据。

var url = "xxx";                           //url地址
var data = {};                             //创建一个空数组
data.xx = XX;                              //需要传递的内容
$.ajax({
   type: "POST",                           //传值方式，有POST和GET
   url: url,                               //一个用来包含发送请求的URL字符串，接收到请求的地址
   data: data,                             //需要传递的值
   dataType: "xxxx",                       //返回内容的格式，最常用的有json,xml...
   success: function(msg){                 //回调函数
     alert( "Data Saved: " + msg );        //在传值成功后执行的代码
   }
});

$.get(); 通过远程HTTP GET请求载入信息。

$.get(url,data,func,type);
//url:待载入页面的url地址
//data:待发送的key/value参数
//func:载入成功后执行的回调函数
//type:返回内容的格式，最常用的有json，xml...

$.post(); 通过远程 HTTP POST 请求载入信息。

$.post(url,data,func,type);
//url:发送请求的地址
//data:待发送的key/value参数
//func:发送成功后执行的回调函数
//type:返回内容的格式，最常用的有json,xml...

jquery节点和javascript节点的差别以及如何互相转换：

1）创建：

//jQuery方式
var $h1 = $("<h1>title='创建节点' class='head'>jQuery与JavaScript创建节点比较</h1>");
$("div").apend($h1);

//向div标签中添加h1标签，以及h1标签内的内容

var div = document.getElementById("div1");
var h1 = document.createElement("h1");
h1.setAttribute("title","创建节点");
h1.setAttribute("class","head");
var txt = document.createTextNode("jQuery与JavaScript创建节点比较");
h1.appendChild(txt);
div.appendChild(h1);

上面两种代码都是创建一个h1标签，然后把它当做div标签的子节点添加到DOM节点树中。

差别：jQuery创建节点比较简洁，JavaScript原生代码创建节点比较繁琐，需要写的代码比较多；但是JavaScript执行的速度比jQuery要快上不少

jquery节点和javascript节点如何互相转换:

//在jQuery对象与JavaScript对象相互转换之前，需要先确定好定义变量的风格。
//如果获取的是jQuery对象。则要在变量前加上$符号：
var $i = jQuery对象;

//如果获取的是DOM对象，则不需要：
var u = DOM对象

jQuery对象转换成DOM对象：

//jQuery代码
var $cr = $("#cr");               //获取到jQuery对象
var cr = $cr[0];                  //转换到DOM对象
alert(cr.checked);                //检测这个checked是否被选中

DOM对象转换成jQuery对象：

var cr = doxument.getElementById("cr");            //获取到DOM对象
var $cr = $(cr);                                   //转换为jQuery对象

使用上面两种方法，可以随意的转换jQuery对象和DOM对象

墨冥

jquery的学习