jQuery$工具方法和CSS的属性经及方法

js与jQuery的转换

一、概述

1.jQuery中$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象，jQuery这个js库，除了$之外，还提供了另外一个函数：jQuery。

2.jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js方式获得的DOM对象。

3.使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。

二、jQuery与js区别与转换

区别:

jquery有一层功能皮肤，其内核还是js

转换:

js转换jQuery====》$(js对象)  作用：转换作用

jquery对象转换成js对象。 (1)jquery对象[索引值] (2)jquery对象.get(索引值)

1.可以通过下标转换成js对象

var $oDiv = $("#oDiv");
console.log($oDiv[0].innerHTML)
console.log($oDiv.innerHTML);

2.可以通过get方法+下标获取

console.log($oDiv.get(0).innerHTML);

//javascript事件
jsdom.onclick = function(){
　　this
}
//jQuery事件
jqdom.click (function(){
　　$(this)
})

$ 工具方法

1.$.each()：遍历数组、对象、对象数组中的数据

$.each()遍历一维数组:

var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
    console.info(i); //这里是索引值，将输出0，1，2
    console.info(val); //这里是元素值，将输出aaa，bbb，ccc
});

$.each()遍历二维数组:

var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
$.each(arr, function(i, item){ 
      console.info(i); //把二维数组中的当做一维数组遍历，元素是内部的一维数组，此处将输出为0，1，2
      console.info(item); //将输出为 ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']
});
//因此想要得到一个二维数组中的每个单独的元素就需要将拿到的item再用$.each()进行一维数组的循环
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] 
$.each(arr, function(i, item){ 
　　$.each(item,function(j,val){
　　　　 console.info(j); //将输出为0，1，2，0，1，2，0，1，2
　　　　 console.info(val); //将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc
　  }); 
});

2.$.trim()：去除字符串两边的空格，返回：string；  

<input type="text" name="" id="username" value=""/> 
var username= $('#username').val(); 
if($.trim(content) == '') 
alert('空');

3.$.type(obj)：得到数据的类型

var str = "zking";
console.info($.type(str ));//打印string
var age = 18;
console.info($.type(age));//打印number

4.$.isArray(obj)：判断是否是数组

$.isArray(123);   // false
$.isArray(true);  // false
$.isArray([1, 2]);// true
$.isArray(new Array(3, 4)); // true

5.$.isFunction(obj)：判断是否是函数

$.isFunction(123); // false
$.isFunction(true);// false
$.isFunction([1, 2]);// false
$.isFunction(function(){});// true
function func(){
}
var sfunc = function(){
}
$.isFunction(func); // true
$.isFunction(sfunc);// true

6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

var str= '{"name":"ikun" ,"age": 21, "sex": "人妖" ,"qq":"2503761796"}'; 
 var jsondata = $.parseJSON(str);

7.$.isNumeric()是用来判断当前变量是否为数字类型

$.isNumeric("-10");  // true
$.isNumeric(16);     // true
$.isNumeric(0xFF);   // true
$.isNumeric("0xFF"); // true
$.isNumeric("8e5");  // true (exponential notation string)
$.isNumeric(3.1415); // true
$.isNumeric(+10);    // true
$.isNumeric(0144);   // true (octal integer literal)
$.isNumeric("");     // false
$.isNumeric({});     // false (empty object)
$.isNumeric(NaN);    // false
$.isNumeric(null);   // false
$.isNumeric(true);   // false
$.isNumeric(Infinity); // false
$.isNumeric(undefined); // false

jQuery属性和CSS

1.attr()：获取某个标签属性的值，或设置某个标签属性的值

<img src="img/kalami.jpg"></img>

$("img").attr("src","img/ikun.jpg")

//  执行结果:<img src="img/ikun.jpg"></img>

2.removeAttr()：删除某个标签属性

<img src="img/kalami.jpg" class="123456"></img>

$("img").removeAttr("class")

//  执行结果:<img src="img/kalami.jpg"></img>

3.addClass()：给某个标签添加class属性值

<img src="img/ikun.jpg"></img>

$("img").addClass("abc");

//  执行结果:<img src="img/ikun.jpg" class="abc"></img>

4.removeClass():删除某个标签class属性值

<img src="img/ikun.jpg" class="123456"></img>

$("img").removeClass("123456");

//  执行结果: <img src="img/ikun.jpg" ></img>

5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选

<img src="img/kalami.jpg" class="123456"></img>

$("img").prop("src","img/ikun.jpg");   / / prop 适用表单操作

//  执行结果: <img src="img/ikun.jpg"></img>

复选框多选:

$("input:checkbox").prop("checked",true);

$("input:checkbox").attr("checked",true);

6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）

<div>   小卡拉米 </div>

console.log($("div").html())  //获得内容

//  执行结果:   小卡拉米

$("div").html("<h1>无敌是多么寂寞</h1>");//设置内容

//  执行结果:<div> <h1>无敌是多么寂寞</h1> </div>

7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)

<div>   ikun  </div>

console.log($("div").text())  //获得内容

//  执行结果:  ikun

$("div").text("<h1>无敌是多么寂寞</h1>");//设置内容

//  执行结果:<div> <h1>无敌是多么寂寞</h1> </div>

8.val()：主要用户获取/设置输入框的值

<input type="text" value="卡卡西">

console.log($("input").val());   //获得值

//  执行结果: 卡卡西

$("input[type=text]").val("你好");//设置值

<input type="text" value="你好">

css属性及方法

• width():容器宽
• height():容器高
• innerWidth()：width+padding
• innerHeight()：height+padding
• outerWidth():width+padding+border
• outerHeight():height+padding+border

css()：设置标签的css样式

• 获取样式值：css("样式名")
• 设置单个样式：css("样式名","样式值")
• 设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})

$("div").css("background","");

$("div").css("background","red");

$("img").css("width","50px");

$("img").css({"width":"200px","height":"300px"});