在jQuery入门
Jquery手册中入门定义：
上面用红笔圈出来的就是jquery基础；很对都跟js大同小异。
最好别敲它给出来的案例。
Js对象和jQuery对象：
jQuery对象只能使用jQuery里的方法
js对象只能使用js里的方法
Jquery中的属性：
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。
如：在img元素中，src就是元素的特性，用来标记图片的地址
JavaScript中操作特性的DOM方法主要有3个，
1.getAttribute()获取特性
2.setAttribute()设置特性
3.removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
1.attr() 获取/设置属性
2.removeAttr() 移出属性
在jQuery中用一个attr()与removeAttr()就可以全部搞定了，
jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()
*/
//1.1 attr()与removeAttr()的用法
/*
attr()方法的用法:
1. $(element).attr("属性名");//获取属性名的属性值
2. $(element).attr("属性","属性值");//设置属性的属性值
3. $(element).attr("属性名","函数值");//设置属性的函数值
4. $(element).attr({"属性名":"属性值","属性名":"属性值"});//给指定元素设置多个属性值
removeAttr()方法的用法:
- $(element).removeAttr("属性名");//移出对应的属性
理解如：
Js中：
window.onload = function () {
//获取元素的src属性
var url = document.getElementById("picture").getAttribute("src");
console.log(url);
//修改alt的属性值
//document.getElementById("picture").setAttribute("alt", "这是通过JS代码动态改写的alt值");
//移出属性
//document.getElementById("picture").removeAttribute("alt");
}
Jquery中：
$(document).ready(function () {
///获取元素的src属性
var url = $("#picture").attr("src");
console.log(url);
//修改alt的属性值
$("#picture").attr("alt", "这是通过jQuery代码动态改写的alt值");
//移出属性alt属性
$("#picture").removeAttr("alt");
//同时修改多个属性
$("#box").attr({ "class": "mybox", "index": "1" });//像这种花括号里面的是一个象
});
若小文子忘了对象的定义，请看这里：
语法：{属性名1:属性值1,属性名2:属性值2,...}
属性名可以加引号，也可以不加，建议不加
如果要使用一些特殊的属性名，则必须加上引号
属性名与属性值是一组键值对结构，
键与值之间用":"冒号连接，对个键值对之间使用","逗号隔开
如果一个属性之后没有其他的属性了，就不要写","逗号
Query属性 动态操作class
1. $(element).addClass();//为每个匹配元素所要增加的一个或多个样式名
- 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
2. $(element).removeClass();//每个匹配元素移除的一个或多个用空格隔开的样式名
3. $(element).toggleClass();
//在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,
取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
理解：
//添加类
function addClassFun() {
$("#box").addClass("bgGreen");//给div动态的添加bgGreen的类
//如果添加多个类，每个类之间用空格隔开
$("#box").addClass("bgGreen fontStyle");
//document.getElementById("#box").className;
}
//移出类
function removeClassFun() {
$("#box").removeClass("bgGreen");
//如果移出多个类，每个类之间用空格隔开
$("#box").removeClass("bgGreen fontStyle");
}
//如果有bgGreen类则移出，如果没有则添加bgGreen类
function toggleClassFun() {
//$("#box").toggleClass("bgGreen");
$("#box").toggleClass("bgGreen fontStyle");
}
$(element).text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
1. $(element).text() 获取element元素的文本内容
2. $(element).text("textString") 用于设置匹配元素内容的文本
jQuery属性的val()方法
$(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和 textarea。
//JavaScript中的value属性
1. $(ele).val() 获取匹配的元素集合中第一个元素的当前值
2. $(ele).val(value) 设置匹配的元素集合中每个元素的值
通过$(ele).val()处理select元素， 当没有选择项被选中，它返回null
$(ele).val()方法多用来设置表单的字段的值
如果select元素有multiple（多选）属性，并且至少一个选择项被选中，
$(ele).val()方法返回一个数组，这个数组包含每个选中选择项的值
理解：//ready方法的简写形式
$(function () {
var str = $("input[type='text']").val();
console.log(str);
$("input[type='text']").val("通过jQuery中的val方法动态赋值");
var op = $("select").val();
console.log(op);
});
$(element).css()方法使用方法
1. $(element).css("属性名") //获取匹配元素集合中的第一个元素的样式属性的计算值
2. $(element).css(["属性名1","属性名2"]) //传递一个数组，返回一个对象结果
3. $(element).css("属性","属性值") //设置元素的css样式
4. $(element).css({"属性1":"属性值1","属性2":"属性值2"}) //可以传一个对象，同时设置多个样式
5. $(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理
理解：
//jquery中给元素添加点击事件
$(".box").click(function () {
//alert("box的点击事件");
//1.获取匹配元素集合中的第一个元素的样式属性的计算值
var width = $(".box").css("width");
var width1 = $(this).css("width");
console.log(width1);//this
// console.log(width);
//2.传递一个数组，返回一个对象结果
var styleObj = $(this).css(["width", "height"]);
console.log(styleObj);
console.log(styleObj.height);
//3.设置元素的css样式
$(".box").css("backgroundColor", "green");
//4.可以传一个对象，同时设置多个样式
$(".box").css({ "color": "#fff", "font-size": 20, "textAlign": "center", "width": "300px" });
//5.可以传入一个回调函数，返回取到对应的值进行处理
$(this).css({
height: function (index, value) {
console.log(index);
console.log(value);
return parseFloat(value) * 1.5;
}
})
});
$(element).width()和$(element).height()
1.$(element).width() 获取或设置元素的宽度
2.$(element).height() 获取或设置元素的高度
$(function () {
//width()方法获取的高度是内容区的宽度
var width = $(".box").width();
//height()方法获取的高度是内容区的高度
var height = $(".box").height();
console.log(width);
//获取第一个匹配元素内部区域高度（包括内边距、不包括边框）。
var innerWidth = $(".box").innerWidth();
var innerHeight = $(".box").innerHeight();
console.log(innerHeight);
//获取第一个匹配元素外部高度（默认包括内边距和边框）。
var outerWidth = $(".box").outerWidth();
var outerHeight = $(".box").outerHeight();
console.log(outerHeight);
})
向元素内部追加内容
js 方法实现
//var box = document.getElementById("box");
document.createElement("标签名称") 创建元素节点
//var p = document.createElement("p");
//console.log(p);
//p.setAttribute("class", "par");
//p.innerHTML = '<a href="#">content</a><span>234234234</span>';
//box.appendChild(p);
//jquery方式添加元素
//$('<p class="par"><a href="#">content</a><span>234234234</span></p>').appendTo($("#wrapper"));
//$(A).appendTo(B) 将新创建A的节点 追加到B(已经存在的父节点)中
//向每个匹配的元素内部追加内容
//$(B).append(A) 将新创建A的节点 追加到B(已经存在的父节点)中
$("#wrapper").append('<p class="par">使用append()方法追加的节点</p>');
//prepend()
$("#wrapper").prepend('<p class="par">使用prepend()方法追加的节点123</p>');
$('<p class="par">使用prependTo()方法追加的节点345</p>').prependTo($("#wrapper"));
