jquery 操作属性[选择器为主] - 我是一枚前端小菜鸟

$.formatMoney() 金额按千位逗号分割；将千分位格式的字符串转换为浮点数；

JSON.parse() JSON 通常用于与服务器端交换数据,在接收服务器数据时一般是字符串,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON.parse(text,[,reviver]) text:必需，一个有效的 JSON 字符串。reviver: 可选，一个转换结果的函数，将为对象的每个成员调用此函数。

解析前要确保你的数据是标准的 JSON 格式，否则会解析出错

$或jQuery本质是一个函数,调用完后返回一个jQuery类型的对象

jQuery的入口函数

jQuery入口函数方法一

$(document).ready(function() { /* 页面中DOM树加载完后会执行，不会等待图片、文件的加载 */ })

jQuery入口函数方法二:

$(function(){
  // 页面中DOM树加载完后会执行，不会等待图片、文件的加载
})

jQuery入口函数与window.onload的对比

① JavaScript的入口函数window.onload要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

② jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

③ window.onload只能注册一次，jQuery入口函数可以注册多次。

DOM对象转jQuery对象

　　$(dom对象)

转换后就可以使用 jQuery中的属性和方法了

过滤器选择器

基本选择器:

名称	用法	描述
ID选择器	$('#选择器')	获取指定ID元素
类选择器	$('.选择器')	获取同一类的class元素
标签选择器	$('div')	获取同一标签的的所有元素
并集选择器	$('div,p, a')	使用逗号分隔,只要符合条件之一就可以
交集选择器	$('div.redClass')	获取class为redClass的div元素

层级选择器:

名称	用法	描述
子代选择器	$('ul>li')	使用 >号,获取儿子层级的元素,并不会获取孙子层级的元素
后代选择器	$('ul li')	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

这类选择器都带冒号:

名称	用法	描述
:eq(index)	$('li:eq(2)').css('color', 'red')	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$('li:odd').css('color', 'red')	获取到的li元素中，选择索引号为奇数的元素
:even	$('li:even').css('color', 'red')	获取到的li元素中，选择索引号为偶数的元素
:last		获取最后一个子元素

选择器筛选方法

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$('ul').children('li')	相当于$('ul > li')，子代选择器
find(selector)	$('ul').find('li')	相当于$('ul li'),后代选择器
siblings(selector)	$('#first').siblings('li')	查找兄弟节点，不包括自己本身。
parent()	$('#first').parent()	查找父亲
eq(index)	$('li').eq(2)	相当于$('li:eq(2)'),index从0开始
next()	$('li').next()	找下一个兄弟
prev()	$('li').prev()	找上一次兄弟

jQuery中的事件注册

// 事件源.事件名(事件处理程序)
$('选择器').事件名(function() {/* 事件处理函数 */})
// 事件在jQuery中通过方法注册
// 事件方法名不加on

jquery操作css

设置单个样式

// 元素.css(name,val)
$('ul> li').css('backgroundColor','red')

设置多个样式

// 元素.css({name:val,name:val,.....name:val})同时设置多个要用花括号{} 包裹
$('li').css({
        color:'red',
        width:'100px',
        backgroundColor:'pink',
        marginTop:'10px'
    });

获取样式

// 元素.css('name')
$('div').css('width')

添加类名

$(元素).addClass(name) 
// 追加类名不会覆盖原有的类名

移除类名

$(元素).removeClass(name) // 删除指定类名
$(元素).removeClass() // 不传参数移除所有类名

检查类名是否存在

$(元素).hasClass(name) 
// 返回布尔值，true表示存在  false表示不存在

切换类名

$(元素).toggleClass(name)  
// 有name就移除name 没有就添加

jQuery操作标签属性

设置单个标签属性

// $(元素).attr(name,value)
<div></div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $('div').attr('title','我是div');
</script>

设置多个标签属性

// 元素.attr({name:val,name:val,.....})   标签属性和自定义属性都可以设置
<div></div>
<script src="../jquery-1.12.4.js"></script>
<script>
    // 设置多个属性
    $('div').attr({
        title:'我是div',
        id:'box',
        index:'0'   // 自定义属性
    });
</script>

// 标签属性和自定义属性都可以设置

获取标签属性

// $(元素).attr(name);
<div id="box" title="我是div"></div>

$('div').attr('title');

移除标签属性

// $(元素).removeAttr(name)
<div id="box" title="我是div"></div>
<script>
    $('div').removeAttr('title');
</script>

prop操作标签属性

在jQuery1.6之后,对于checked、selected、disabled这类Boolean类型的属性来说,不能用attr方法,，只能用prop方法

获取属性值

元素.prop(name)

// $(元素).prop(name)
足球：<input type="checkbox">
<script src="../jquery-1.12.4.js"></script>
<script>
      // attr方式获取
    //var flag = $('input').attr('checked');
    //console.log(flag);  // undefined
    
      // prop方式获取
    var flag = $('input').prop('checked');
    console.log(flag);  // false
</script>

设置属性值

元素.prop(name,value)

足球：<input type="checkbox">
<script>
    // 设置多选框为选中
    $('input').prop('checked', true);
</script>

操作标签内容

获取表单元素的内容

元素.val()

<input type="text"><button>按钮</button>
  <script>
    $('button').click(function() {
      console.log($('input').val());
    })
  </script>

设置表单元素内容

元素.val(value)

<input type="text"><button>按钮</button>
  <script>
    $('button').click(function() {
      console.log($('input').val('你好啊'));
    })
  </script>

获取非表单元素的内容

元素.text()

div>
    <p>我是div中的p</p>
</div>
<script>
    // 获取div中的内容
    var content = $('div').text();
    console.log(content);  // 注意：仅仅获取文本 ‘我是div中的p’
</script>

设置非表单元素的内容

元素.text(value)

<div>
    <p>我是div中的p</p>
</div>
<script>
    // 设置div中的内容
    $('div').text('<h1>我是标题</h1>');    // 注意：所设置的标签不会被浏览器解析
</script>

获取非表单的内容

元素.html()

设置非表单元素的内容

元素.html(value)

jQuery动画实现

基本动画1 【一般情况下 tab切换用】

动画显示

元素.show(speed ，callback)

参数：① speed ，可选，表示动画执行时长，数字表示毫秒。也可用字符串 slow(600)、normal(400)、fast(200)。

　　 ② callback，可选，表示动画执行完后要执行的程序，用函数表示。

// 给按钮注册点击事件
 $('button').click(function(){
     // 显示div
    // $('div').show(500);
    // $('div').show('slow');
    $('div').show(500,function(){
        alert('动画结束')
        });
 });

动画隐藏

元素.hide(speed,callback)

参数：① speed ，可选，表示动画执行时长，数字表示毫秒。也可用字符串 slow(600)、normal(400)、fast(200)。
② callback，可选，表示动画执行完后要执行的程序，用函数表示

  // 给按钮注册点击事件
  $('button').click(function () {
    // 隐藏div
    // $('div').hide(600);
    // $('div').hide('slow');
    $('div').hide(500, function () {
      alert('动画结束')
    });
  });

动画切换

元素.toggle(speed,callback)