基本包装类型 - Cirry's Blog

印象笔记迁移

$(s1 s2)[父子]

层次选择器:在s1内部获得全部的s2节点(不考虑层次);

1
<div>
2
  <span></span>
3
  <p><span></span></p>
4
  <span></span>
5
<div>

$('div span')

$(s1>s2)[父子]

直接子元素选择器:在s1内部获得子元素节点s2;

1
<div>
2
  <span></span>
3
  <p><span></span></p>
4
  <span></span>
5
<div>

1
$('div>span');
2
// $(s1 + s2)[兄弟]

直接兄弟选择器:在s1后边获得紧紧挨着的第一个兄弟关系的s2节点;

1
<div>
2
     <span></span>
3
     <p><span></span></p>
4
     <span></span>
5
<div>
6
<span></span>
7
<span></span>

1
$('div+span');
2
// $(s1~s2)[兄弟]

后续全部兄弟关系节点选择器:在s1后边获得全部兄弟关系的s2节点

1
<div>
2
     <span></span>
3
     <p><span></span></p>
4
     <span></span>
5
<div>
6
<span></span>
7
<span></span>
8
<p></p>
9
<span></span>

1
$('div~span');

过滤(并且)选择器

1
$('li:first');
2
$('li:last');
3
$('li:eq(2)'); //等于
4
$('li:lt(2)'); //小于
5
$('li:gt(3)'); //大于
6
$('li:even'); //偶数
7
$('li:odd'); //奇数
8
$('li:not(#gg)'); //去除
9
$(':header'); //选择标题元素,过滤(并且)选择器可以单独使用

1
//获得"标题标签元素",并且有"class=pear"属性值
2
$(':header .pear')
3
//大于1小于5,每个选择器使用前节点的下表要归位(归0),即对li:gt(1)找到的li从0重排
4
$('li:gt(1):gt(3)');

内容过滤选择器

1
$('div:contains(dog)');
2
//:contains(内容)
3

4
<div>my name is dog.</div>
5
<div>heh</div>

1
//:empty
2
$('div:empty');
3
<div></div>
4
<div>  </div>;

1
//:has 节点内部必须包含指定选择器对应的元素
2
$('div:has(#apple)');
3
<div><p></p></div>
4
<div><span id='apple'></span></div>

1
//:parent 寻找的节点必须作为父元素节点存在
2
$('div:parent');
3
<div></div>
4
<div>     </div>
5
<div><input type='text'/><div>

表单域选中选择器

1
//:checked
2
$('gg:checked')
3
//:selected 获得被选中的下拉列表项目
4
$('hh:selected');

属性操作

1
$().attr(属性名称); //获得属性信息值
2
$().attr(属性名称,值); //设置属性的信息
3
$().removeAttr(属性名称); //删除属性
4
$().attr(json对象); //同时为多个属性设置信息值,json对象的键值是名值对
5
$().attr(属性名称,fn); //通过fn函数执行return返回值对属性赋值

1
//attr对同一个属性进行多次修改,后者会覆盖前者
2
//以下三条语句,最终class='banana'
3
$('div').attr('class','apple');
4
$('div').attr('class','pear');
5
$('div').attr('class','banana');

1
$('input:first').attr('type');
2
$('input:first').attr('class','gg');
3
$('gg').removeAttr('id');

class属性值操作

1
$().addClass(); //追加某个信息值
2
$().removeClass(); //删除某个信息值
3
$().toggleClass(); //切换

1
//以下三个信息会同时存在,区别于attr
2
$().addClass('apple');
3
$().addClass('pear');
4
$().addClass('banana');

标签包含内容操作

1
$().html(); //获得节点包含的信息,字符串和html标签
2
$().html(参数); //设置节点包含的内容
3
$().text(); //获得节点包含的"文本字符串信息"内容
4
$().text(参数); //设置节点包含的内容(有html标签就把"><"符号变为符号实体)

value属性快捷操作

1
$().attr( 'value');
2
$().attr('value','参数');

快捷操作

1
$().val(); //获得value属性值
2
$().val(参数); //设置value属性值
3
// 该val()方法在 复选框.单选按钮.下拉列表的使用有凸出表现

复选框操作

1
//$(对象).val([元素值,元素值]); 可以设置"value=元素值"的项目选中
2
$('.gg').val([1, 4]); //选中第一项和第四项
3

4
//全选,反选,全不选
5
$('.gg').attr('checked', true); //全选
6
$('.gg').attr('checked', false); //全不选
7
//反选
8
function TogSel() {
9
  for (var i = 0; i < $('gg').length; i++) {
10
    var flag = $('.gg:eq(' + i + ')').attr('checked');
11
    $('.gg:eq(' + i + ')').attr('checked', !flag);
12
  }
13
}

下拉框操作

1
$(option:selected).val(); //获得选中对象的value值,适合单选
2
//多选情况,$(下拉列表).val();
3
$(select).val();
4
//设置多选
5
$('#gg').val(['1','2']); //设置下拉框第一项和第二项被选中

单选按钮操作

1
$('.gg:checked').val(); //获取
2
$('.gg').val(['1','2']); //设置