开发者社区> codingcoge> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery的基本使用

简介: 方法连缀: $('p').removeClass('classFoo').addClass('classBar'); 方法迭代: 可以使用each方便对元素列表进行循环操作 $('li').
+关注继续查看

方法连缀:
$('p').removeClass('classFoo').addClass('classBar');

方法迭代:
可以使用each方便对元素列表进行循环操作
$('li').each(function(i){
    alert( typeof this);
});

css选择器:
$('*')  选择所有元素
$('tag') 选择所有html标签中的tag元素
$('tagA tagB')选择作为tagA后代的所有tagB元素
$('tagA,tagB,tagC')选择所有tagA元素,tagB元素,tagC元素
$('#id')和$('tag#id')选择所有ID为id或者ID为id且标签为tag的元素
$('.className')是clas为className的元素

tagA tagB是更具体的后代元素
tagAtagB是同时满足条件

$('tag[attr]')  选择所有带有attr属性的tag元素

也可以使用一些伪类和伪元素选择器 基于在他们在文档中的文职而不必通过类名或者ID而找到任意一个特定的元素

选择文章中nav元素包含的所有链接  用DOM比较麻烦
但使用选择器用法可以缩短为很少的字符 
var links=$('article nav a');
这样代码不仅清晰 而且容易看懂

库提供还有专有的选择器
比如 选择偶数和奇数元素       even是偶数
$('tr:odd').addClass("odd");  奇数

$('tag:odd')   选择匹配元素集中的奇数元素
$('tag:even')     偶数个个数 特别时候突出表格行
$('tag:eq(0)') 和$('tag:nth(0)')选择匹配元素集中的第n个元素 如页面的第一个段落
$('tag:contains('test')')   包涵指定文本的所有元素
$('tag:gt(n)')选择匹配元素集中所有大于n的所有元素
$('tag:lt(n)')选择匹配元素集中所有小于n的所有元素
$('tag:first') 等效于eq(0);
$('tag:last') 选择匹配元素集中的最后一个元素
$('tag:parent') 选择匹配元素集中包涵子元素的所有元素
$('tag:visible')   所有可见元素
$('tag:hidden')   所有隐藏的元素

举例:修改页面第一个段落的字体粗细
$("p:first").css("font-weight","bold");
显示素有隐藏的div元素
$("div:hidden").show();
隐藏所有包涵单词  scared的div元素
$("div:contains('scared')").hide();


jQuery还提供了专门为表单设计的表达式 用于快速访问表单元素
:input   选择表单中所有的元素 (input select textarea button)
:text    type=“text”
:password  type="password"
:radio     type="radio"
:checkbox  type="checkbox"
:submit    type="submit"
:image     type="image"
:reset     type="reset"
:button    type="button"


生成内容 :
用jQuery创建新的DOM元素很简单   把HTML作为$函数的参数传入 可创建新的节点   下面是给body元素添加一个新的div的元素 新的div元素有一个值为example的id 并且包涵“hello”
$('<div id="example">Hello</div>').appendTo(document.body);

使用jQuery模板插件可以在html字符串中声明一些特殊的变量如  ${term} 这些变量随后可以被替换成一组数组或者其他模板

操作内容 
比如  appendTo或者insertAfter
把一个列表的所有元素全部转移到另一个列表
$('ul#list1 li').appendTo("ul#list2");

如果是复制过去则这样:
$('ul#list1 li').clone().appendTo("ul#list2");


加载事件:
1.function xx(){

}
$(xx);
也可以:
$(function(){

})
2.$(document).ready(function(){
})

还有很多特定于元素的事件  例如focus。click等等
举例:  批量注册事件
$('a').click(function(event){
window.open(this.getAttribute('href'));
return false;
})

就算没有用户交互 也可以调用相应的方法触发:
$('a:first').click();

举例:blur和focus
$(function(){
    $('form input[placeholder]').focus(function(){
    var input=$(this);
    if(input.val()==input.attr('placeholder')){
        input.val('').removeClass('placeholder');
    }
    }).blur(function(){
        var input=$(this);
        if(input.val==''){
            input.val(input.attr('placeholder')).addClass('placeholder');
        }
    }).blur();
})

基于css属性的动画:
原来的:
var links=list.getElementsByTagName("a");
links[0].onmousever=function(){
    moveElement("preview",-100,0,10);
}
links[0].onmousever=function(){
    moveElement("preview",-200,0,10);
}
links[1].onmousever=function(){
    moveElement("preview",-200,0,10);
}

修改后:
$('a').each(function(i){
    var preview=$('#preview');
    var final_x=i*-100;
    $(this).onmousever(function(){
        preview.animate({left:final_x},10);
    })
})

还有很多jquery UI套件和jquery缓动插件
也还有很多组合动画

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Jquery基本用法总结
选择器$("#mydiv") 通过ID$("p#myp") 选择id=myp 的所有p元素(组合型)$(".mydiv") 通过 class="mydiv"$("p.myp") 选择class=myp 的所有p元素 $("p").
693 0
jQuery进阶
在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。
0 0
jQuery——jQuery基本概念
jQuery——jQuery基本概念
0 0
jQuery的基本概念和入门操作
jQuery的基本概念和入门操作
0 0
+关注
codingcoge
种一棵树最好的时间是十年前,其次是现在。 java自学后台ing,请多指教 Github: https://github.com/jjc123
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
JS零基础入门教程(上册)
立即下载
《零基础HTML入门教程》
立即下载