jQuery 常用词汇

开头简写: $(function($){// 你可以在这里继续使用$作为别名...});

选择器:

$('#id') 根据给定的ID匹配一个元素
$('.class') 根据给定的类匹配元素
$('tag') 根据给定的元素名匹配所有元素


$('li:eq(1)') 获取下标为1的li标签
$('#box li:last') 获取id为box的对象里面最后一个li标签
$('#box li:first') 获取id为box的对象里面第一个li标签


通过关系查找:

$('.class').siblings(); 查找同辈的所有元素
$('.class').children(); 查找子元素
$('.class').next(); 查找同辈的下一个元素
$('.class').nextAll(); 该元素之后所有的同辈元素
$('.class').prev(); 查找同辈的上一个元素
$('.class').prevAll(); 该元素之前所有的同辈元素
$('.class').parent(); 查找元素的父辈


対样式的操作:

添加class $('li').addClass(class|fn);
删除class $("p").removeClass(class|fn);
添加/删除class $(".div").toggleClass(class);
说明:如果存在(不存在)就删除(添加)一个类。

直接操作css:
$("p").css("color"); 获得颜色值
$("p").css("color","red"); 设置颜色值
$("p").css({ color: "#ff0011", background: "blue" });


对属性的操作:

attr()设置或返回被选元素的属性值。
   获取属性   $("li").attr("title");
   设置属性 $("li").attr("title",'value');
   设置多个属性 $("img").attr({src:"test.jpg",alt:"TestImage"});
   设置多个对象的属性,利用回调函数做:
$('li').attr('title',function(index,attr){
    this.title="home"+index;
});


对内容的操作:

取得内容
 //1)取得第一个匹配元素的html内容。
   $('.select').html()
 //2)取得匹配元素的文本内容,去除里面的标签,获取多个的内容
    $('.select').text();

删除内容
$('.delete').remove(); //1)将该元素整个干掉
$(".delete").empty(); //2)将该元素的子元素或者内容清空


增加内容
  // 向每个匹配的元素内部追加内容。 追加到末尾
   $('.cla').append("<b>追加</b>");
   //每个匹配的元素内部前置内容。
   $('.cla').prepend("<b>追加</b>");

   //在每个匹配的元素之后插入内容。
    $("p").after("<b>Hello</b>");
   //在每个匹配的元素之前插入内容。
   $("p").before("<b>Hello</b>");

设置/修改内容
   //1)设置匹配元素的html内容。
   $('.select').html('设置所有选中元素的内容');

    //2)设置匹配元素的不同的内容。
    $('.cla').html(function(index,html){
        this.innerHTML= html+index;
    });


表单操作:

val() 获得或者设置匹配元素的当前值。
   //获取输入框user的值
  $("input[name='user']").val();
   //修改输入框user的值
   $("input[name='user']").val(2323);

prop() 修改、获取表单属性值
   //获取到属性值
  $("input[name='user']").prop('value');
 
  // 禁用
   $("input[name='user']").prop('disabled',true);

  //选中
  $("input[name='love']").prop('checked',true);

Copyright © 2016-2019 709173702@qq.com 版权所有  ICP证粤ICP备16117826号-1
联系邮箱:709173702@qq.com