2.jQuery高级

基本方法扩充

 
  1. get()：下标和length属性
  2. outerWidth()：针对隐藏元素和参数true
  3. text()：合体的特例
  4. remove()：detach()
  5. $()：$(document).ready()
 
get()：就是把JQ转成原生的js
$('#div1').innerHTML;    //这种写法是不允许的
$('#div1').get(0).innerHTML;    //就是把JQ转成原生的js
 
for(var i = 0 ; i<$('li').get().length ; i++){
    $('li').get(i).style.background = 'red';
}
 
outerWidth()：针对隐藏元素和参数true,获取第一个匹配元素外部宽度（默认包括补白和边框）。
 
text()：合体的特例,取得所有匹配元素的内容。
$('p').text();    //返回p元素的文本内容。
$("p").text("Hello world!");    //设置所有 p 元素的文本内容
 
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
 });    //使用函数来设置所有匹配元素的文本内容。
 
remove()：从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
 
detach()：从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
 
$(function(){    //等DOM加载完就可以执行了，性能要好
    
});
 
$(document).ready(function(){})：    //在DOM加载完成时运行的代码
 
 
 
DOM操作
 
$()下的常用方法
  1. parents()    closest()
  2. siblings()
  3. nextAll()    prevAll()
  4. parentsUntil()    nextUntil()    prevUntil()
  5. clone()
  6. wrap()    wrapAll()    wrapInner()    unwrap()
  7. add()    slice()
  8. serialize()    serializeArray()
 
parents()：取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$("span").parents();
$("span").parents("p");
 
parent()：取得一个包含着所有匹配元素的唯一父元素的元素集合。
 
closest()：获取最近的指定的祖先节点（包括当前元素自身），必须要写筛选的参数，只能找到一个元素
closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
 
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
 
siblings()：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("div").siblings();    //找到每个div的所有同辈元素
 
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("div").siblings(".selected");    //找到每个div的所有同辈元素中带有类名为selected的元素
 
nextAll()：查找当前元素之后所有的同辈元素
prevAll()：查找当前元素之前所有的同辈元素
 
parentsUntil()：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
nextUntil()：查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
prevUntil()：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
 
clone()：克隆匹配的DOM元素并且选中这些克隆的副本
<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p");    //克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
<b>Hello</b><p><b>Hello</b>, how are you?</p>
 
wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来
$("p").wrap("<div class='wrap'></div>");    //把所有的段落用一个新创建的div包裹起来
$("p").wrap(document.getElementById('content'));    //用ID是"content"的div将每一个段落包裹起来
 
wrapAll()：将所有匹配的元素用单个元素包裹起来
$("p").wrapAll("<div></div>");    //用一个生成的div将所有段落包裹起来
$("p").wrapAll(document.createElement("div"));    //用一个生成的div将所有段落包裹起来
 
wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$("p").wrapInner("<b></b>");    //把所有段落内的每个子内容加粗
$("p").wrapInner(document.createElement("b"));    //把所有段落内的每个子内容加粗
 
unwrap()：这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。
<div>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
</div>
$("p").unwrap();
结果:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
 
add()：把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集
 
PS：.add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加
 
slice()：选取一个匹配的子集
<p>Hello</p><p>cruel</p><p>World</p>
$("p").slice(0, 1).wrapInner("<b></b>");    //选择第一个p元素
$("p").slice(0, 2).wrapInner("<b></b>");    //选择前两个p元素
$("p").slice(1, 2).wrapInner("<b></b>");    //只选取第二个p元素
$("p").slice(1).wrapInner("<b></b>");    //只选取第二第三个p元素
$("p").slice(-1).wrapInner("<b></b>");    //选取第最后一个p元素
 
 
serialize()：序列表表格内容为字符串
<p id="results"><b>Results: </b> </p>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/> check2
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2
</form>
 
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );    //序列表表格内容为字符串，用于 Ajax 请求
 
serializeArray()：序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据
'''注意'''，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。
返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // this one was empty
]
 
jQuery中的运动
 
$()下的常用方法
  1. animate()
  2. stop()
  3. delay()
  4. delegate()    undelegate()
  5. trigger()
  6. ev.data    ev.target    ev.type
animate()：用于创建自定义动画的函数
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
 
//时间后面可以添加运动形式 有两种运动形式（默认：swing（慢块慢） linear（匀速））
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 ,'linear' );
 
stop()：停止所有在指定元素上正在运行的动画
// 开始动画
$("#go").click(function(){ $(".block").animate({left: '+200px'}, 5000);});
// 当点击按钮后停止动画
$("#stop").click(function(){ $(".block").stop();});
 
stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
 
delay()：设置一个延时来推迟执行队列中之后的项目
delay(duration,[queueName])

duration:延时时间，单位：毫秒

queueName:队列名词，默认是Fx，动画队列。

 

<div id="foo /">
$('#foo').slideUp(300).delay(800).fadeIn(400);    //在.slideUp() 和 .fadeIn()之间延时800毫秒
 
 

 

delegate()：指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
delegate(selector,[type],[data],fn)
$('ul').delegate('li' , 'click' , function(){
    this.style.background = 'red';
});
 
undelegate()：删除由 delegate() 方法添加的一个或多个事件处理程序
undelegate([selector,[type],fn])
 
trigger()：在每一个匹配的元素上触发某类事件
trigger(type,[data])
$("form:first").trigger("submit");    //提交第一个表单，但不用submit()
 
ev.data：当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
$("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); });
}); //The description of the example.
 
 
ev.target：最初触发事件的DOM元素
ev.type：点击所有锚点后弹出事件类型
 
jQuery的工具方法
$下的常用方法
  1. type()
  2. trim()
  3. inArray()
  4. proxy()
  5. noConflict()
  6. parseJSON()
  7. makeArray()
type()：检测obj的数据类型
  • jQuery.type(true) === "boolean"
  • jQuery.type(3) === "number"
  • jQuery.type("test") === "string"
  • jQuery.type(function(){}) === "function"
  • jQuery.type([]) === "array"
  • jQuery.type(new Date()) === "date"
  • jQuery.type(/test/) === "regexp"
trim()：去掉字符串起始和结尾的空格
 
inArray()：确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )
jQuery.inArray(value,array,[fromIndex])
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jQuery.inArray("David", arr); //-1
jQuery.inArray("Pete", arr, 2); //-1
 
proxy()：返回一个新函数，并且这个函数始终保持了特定的作用域
 
noConflict()：防止冲突的
 
var miaov = $.noConflict();
 
var $ = 10;
miaov(function(){
    miaov('body').css('background' , 'red');
});
 
parseJSON()：接受一个JSON字符串，返回解析后的对象
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
解析一个JSON字符串
 
ajax的使用方法
$下的常用方法
 
ajax() : json形式的配置参数
url    success
error    contentType
data    type
dataType    cache    timeout
 
抽象出来的方法
get()
post()
getJSON()
>>支持jsonp的形式：指定?callback=?
 
$.ajax({ url : 'xxx.php', data : 'name=hello&age=20', type : 'POST', success : function(){ alert(1); }, error : function(){ alert(2); } });
jQuery的插件操作
 
jQuery.extend([deep], target, object1, [objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象
 
$.extend(function(){
    leftTrim : function(str){
        return str.replace(/^\s/ , ' ');
    }
});
posted @ 2018-01-10 23:01  journeyIT  阅读(0)  评论(0)  编辑  收藏  举报