我爱编程

jQuery相关方法总结 01

2017-05-17  本文已影响0人  IT男的成长记录

jQuery

jQuery是一个快速、简洁的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

使用jQuery获取元素

选择器：

基本选择器 功能
$('*'); 匹配页面所有元素
$('#id'); id选择器
$('.class'); 类选择器
$('element'); 标签选择器
组合/层次选择器 功能
$('E,F') 多元素选择器，用”,分隔，同时匹配元素E或元素F
$('E F') 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
$(E>F) 子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
$('E+F') 直接相邻选择器，匹配E元素之后的相邻的同级元素F
$('E~F') 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$('.class1.class2') 匹配类名中既包含class1又包含class2的元素
基本过滤选择器 功能
$("E:first") 所有E中的第一个
$("E:last") 所有E中的最后一个
$("E:not(selector)") 按照selector过滤E
$("E:even") 所有E中index是偶数
$("E: odd") 所有E中index是奇数
$("E:eq(n)") 所有E中index为n的元素
$("E:gt(n)") 所有E中index大于n的元素
$("E:lt(n)") 所有E中index小于n的元素
$(":header") 选择h1~h6 元素
$("div:animated") 选择正在执行动画效果的元素
内容过滤器 功能
$('E:contains(value)') 内容中包含value值的元素
$('E:empty') 内容为空的元素
$('E:has(F)') 子元素中有F的元素，$('div:has(a)'):包含a标签的div
$('E: parent') 父元素是E的元素，$('td: parent'):父元素是td的元素
可视化选择器 功能
$('E:hidden') 所有被隐藏的E
$('E:visible') 所有可见的E
属性过滤选择器 功能
$('E[attr]') 含有属性attr的E
$('E[attr=value]') 属性attr=value的E
$('E[attr !=value]') 属性attr！=value的E
$('E[attr ^=value]') 属性attr以value开头的E
$('E[attr $=value]') 属性attr以value结尾的E
$('E[attr *=value]') 属性attr包含value的E
$('E[attr][attr *=value]') 含有属性attr且属性attr！=value的E
子元素过滤器 功能
$('E:nth-child(n)') E的第n个子节点
$('E:nth-child(3n+1)') E的index符合3n+1表达式的子节点
$('E:nth-child(even)') E的index为偶数的子节点
$('E:nth-child(odd)') E的index为奇数的子节点
$('E:first-child')1 所有E的第一个子节点
$('E:last-child') 所有E的最后一个子节点
$('E: only-child') 只有唯一子节点的E的子节点
$("E:first-of-type"); 匹配所有E的父元素的第一个E类型的孩子
$('E:last-of-type'); 匹配所有E的父元素的最后一个E类型的孩子
$('E:nth-of-type(2)'); 匹配所有E的父元素的第二个E类型的孩子
$('E:nth-last-of-type(n)'); 匹配所有E的父元素的第二个E类型的孩子，从最后一个子元素开始计数
表单元素选择器 功能
$('E:type') 特定类型的input
$(':checked') 被选中的checkbox或radio
$('option: selected') 被选中的option

元素获取的方法

对于一个特定结果集，我们想获取到指定index的jQuery对象

兄弟元素获取

父子元素的获取

筛选当前结果集

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})


//相当于对结果集中的每个元素(DOM对象)进行了处理，但只有返回true的元素才会被选中(选中后再被包装成jquery对象)
$('li').filter(function(index, node){
  // 这里node和this的类型都是DOM对象
  console.log(node);
  console.log(this);
  return true; // 最终会得到所有li元素
  // 因此可以通过相关操作,只对符合的元素返回true
});

jQuery DOM操作

创建元素

var obj = $('<div class="test"><p><span>Done</span></p></div>');

添加元素

删除元素

包裹元素

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrap("<div class='new'></div>");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrapAll("<div class='new'></div>");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrapInner("<div class='new'></div>");

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

属性和CSS操作

<ul class="img-list">
    <li data-src = "1.jpg">1</li>
    <li data-src = "2.jpg">2</li>
    <li data-src = "3.jpg">3</li>
</ul>
<button type="button" id="add">增加</button>
<script>
$('.img-list>li').on('click', function(){
    // 这里this指的是 <li data-src = "x.jpg">x</li> DOM对象
    var url = $(this).attr('data-src');
    $image.attr('src', url);
})
$('#add').on('click', function(){
    $('.imag-list').append("<li data-src = '1.jpg'>1</li>");
})
</script>

属性相关:

$('input').val();
$('input').val('newValue');

//js原生方法获取input元素的value值
var input = document.getElementById('#username');
console.log(input.value);
input.value = 'newValue';

$('img').get(0).attr("src");  // 获取img的src

$('img').get(0).attr("src", "http://image.baidu.com/123.jpg");

// js原生原生方法 获取/设置元素特定属性的值

var img = document.querySelector("img");
var origin = img.getAttribute("src");
img.setAttribute("src", "http://image.baidu.com/123.jpg")


$('div').removeAttr('id');
// js原生方法
document.querySelector('div').removeAttribute('div');

CSS相关

// 查看jquery对象的所有css样式
console.log($('#container').css());
// 获取jquery对象的指定样式
var color = $('#container').css("background-color");
var styleProps = $('#container').css([
  "width",
  "height",
  "color",
  "background-color"
]);
// 为jquery对象设置样式
$('#container').css( "background-color", "yellow" );

$('#container').css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

// 输出element的所有有css样式
document.querySelector('#container').style;
// 输出element的指定样式
document.querySelector('#container').style.borderColor;
// 设置element的指定样式
document.querySelector('#container').style.border = "1px solid red";

$( "p" ).addClass( "myClass yourClass" );
$( "p" ).removeClass( "yourClass" );
//JS原生方法
var p = document.querySelector('p');
p.classList.add("myClass","yourClass");
p.classList.remove("yourClass")

第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
上一篇下一篇

猜你喜欢

热点阅读