10°

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

本文由【墨】发布于开源中国,原文链接:https://my.oschina.net/u/3950339/blog/3050073

全部评论: 0

    我有话说: