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对象