jQuery笔记1
1，简介
jQuery是JavaScript函数库，我们只需要调用相应的方法，宗旨是用最少的方法完成最复杂的功能。版本1.？兼容IE8，版本2.？不兼容IE8。1.9-1.11的版本差别不是很大。不要使用1.9以下的版本。
2，特点
2-1，核心库只有几十kb
2-2，代码简洁，支持链式代码风格
2-3，跨平台，jQuery对各种浏览器都保持了很好的兼容性，可大幅提高前端开发测试效率
2-4，高性能
2-5，插件众多
下面是辅助代码：
测试
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
快速生成li标签方法：li{$}10
3，/1,$可以传匿名函数（）{}/
$(function (){
/2,传页面元素选择器，：返回的是jQuery对象
* 主要是对原始DOM对象进行了一个封装
* jQuery提供了统一的API（属性和方法）都能够使用*/
$("#box").css("color","red");
console.log($);//返回初始化函数
console.log($());//调用一下初始化函数
console.log($("#box"));//返回的是jQuery对象
console.log($("#box").css("color","red"));//返回的还是jQuery对象
$("#box").css("color","red").css("font-size","50px");
console.log($("#box").css("color","red").css("font-size","50px"));
/*上述还是返回jQuery对象，这是链式代码风格的原理，每次操作后都是返回jQuery对象*/
});
4，关于window.onload和$(document).ready(function(){})的区别
/*1，window.onload
* 页面加载完毕：html，css，所有资源（包括图片视频等）全部加载完以后执行里面的内容
* 只能写一次，会覆盖
*
2，$(document).ready(function(){})
* 只需要等待DOM结构加载完毕就可以执行，加载DOM结构很快，使用这个不用等图片或者视频加载完就可以执行
* 可以执行多次，不会被覆盖
* 简写$(function(){...})
* 另外一种写法，匿名函数自动执行，把jQuery对象传参数进去，目的是为了避免和其他函数库发生冲突
* (function ($){
* 代码
* })(jQuery)
*
* 3，如果必须要等资源加载完，则使用jQuery提供的方法
* $(window).load(function(){...})
* 可以使用多次，不会被覆盖/
5，jQuery-DOM选择器如何使用
5-1，css2基本选择器和符合选择器都能正常使用：$("#id")，$(".class")，$("tag")
例如：
$(function (){
var myli=$("div ul li");获取上述结构中的li标签对象
console.log(myli);
console.log(myli.length);
//返回10， length是jquery里提供的属性
如果在DOM中直接使用length是不能够有结果的：
console.log(document.getElementById("box").length);
//返回undefined，length不是原生的方法，可以用在获取document.getElementsByTagName()和document.getElementsByClassName()中
DOM对象和jQuery对象之间的互换
//打印DOM对象
console.log(document.getElementById("box"));
//打印jQuery对象
console.log($("#box"));
//把jQuery对象转换为DOM对象
console.log($("#box").get(0));
//把原生DOM对象转换为jQuery对象
console.log($(document.getElementById("box")));
});
5-2，对input标签内容进行更改
DOM结构：
function getValue(){
console.log("==========");
var mytxt=$("input[type='text']").val();//jquery对象获取value的方法
console.log(mytxt);
}
function setValue(){
$("input[type='text']").val("你好")
}
5-3，对html结构进行更改
DOM结构
测试
function getHTML(){
console.log($("#box").html());
}
function setHTML(){
$("#box").html("
我是替换的标题
");}
function addHTML(){
$("#box").html($("#box").html()+"
我是替换的标题
");}
5-4,关于checkbox以及属性操作
快速生成input标签：
Input[type=”checkbox”value=”$”]*10
5-5，对标签的class操作
DOM结构
测试
6，jQuery-DOM节点操作
DOM结构
P元素