js&jquery相关

jquery相当于一个javascript的库，就像python中的第三方库一样，需要导入进来，jquery兼容的浏览器众多，最新的版本已经到了2.2.X了。

JavaScript和查询（Query），即是辅助JavaScript开发的库。

先来说一下javascript。

之前使用javascript的时候需要选择一个元素进行操作的时候，需要获取元素文件对象模型，即DOM。

比如要获取一个指定id的元素的值。
•document.getElementById('id')
获取指定class的元素的值
•document.getElementsByName('name')
获取指定标签名的元素的集合
•document.getElementsByTagName('tagname')

要对获取到的值进行操作的时候如下

创建标签
var link = document.createElement("a")
link.href="http://www.baidu.com"

变量

//全局变量
name = "hansz"
//局部变量
var name = "hansz"

//基本函数
function test(){alert(name);}

//自执行函数
(function (arg) {
alert(arg);
})('hansz')

//变量相关方法
//转换为字符串或者数字
var myNumber = 24; // 24
var myString = myNumber.toString(); // "24"

var myNumber = 24; // 24
var myString = String(myNumber); // "24"

//分割
var myString = "coming,apart,at,the,commas";
var substringArray = myString.split(","); // ["coming", "apart", "at", "the", "commas"]
var arrayLimited = myString.split(",", 3); // ["coming", "apart", "at"]

//长度
var name="hansz";
name_length = name.length;

//在字符串中找到位置，从头开始
var string1 = "han sheng zhao";
var find1 = string1.indexOf("ha");
var find2 = string2.lastIndexOf("ha");

//替换字符串
var name = "hansz";
var new_name = name.replace("nsz","omx");
console.log(new_name);//控制台打印日志

//根据位置找字符charAt
var name= "hansz";
find3= name.charAt(3);

//连接多个字符串,也可以用加号。
var name1 ="han";
var name2 = "shengzhao";
var new_name = name1.concat(name2);

//字符串分片slice()和substring（）
var name = "hanshengzhao";
var str1 = name.slice(2,4);
var str2 = name.substring(3,5);
//SUBSTR第二个参数是长度。
var str3 = name.SUBSTR(2,4);

//转换大小写
toLocaleUpperCase
toUpperCase
toLocaleLowerCase
toLowerCase

//匹配match
var myString = "How much wood could a wood chuck chuck";
var myPattern = /.ood/;
var myResult = myString.match(myPattern); // ["wood"]
var patternLocation = myResult.index; // 9
var originalString = myResult.input // "How much wood could a wood chuck chuck"

var myString = "How much wood could a wood chuck chuck";
var myPattern = /.huck/;
var myResult = myPattern.exec(myString); // ["chuck"]
var patternLocation = myResult.index; // 27
var originalString = myResult.input // "How much wood could a wood chuck chuck"

如果没有找到匹配，那么返回空值

数组

//定义数组
var myArray=new Array()
var myArray=new Array(3)
var mycars=new Array("Saab","Volvo","BMW")
//赋值，或者修改已有的。
mycars[0]="Opel";
[数组操作](http://www.cnblogs.com/yunfour/archive/2011/01/25/1944533.html)

循环

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

Jquery

jquery的关键是选择器，query的选择器非常方便，使我们不用输入documentby。。。

//基本选择器 和css的选择器非常相似
$("#id")//找到id等于"id"的
$(".class")//找到class等于class的
$("div")//找到所有标签为div的
$("*")//找到每一个元素

//层级选择器，选择父级 子级等
$(".topname").parent() //选择class等于topname的父级标签
$(".topname").children() //选择class等于topname的子级标签

// form下的input标签
$("form > input")

//匹配所有跟在 label 后面的 input 元素
$("label + input")

//找到所有与表单同辈的 input 元素
$("form ~ input")

//获取匹配元素的第一个
$('li:first');

//查找所有未选中的input
$("input:not(:checked)")

属性

//attr
//获取所有img的src
$("img").attr("src");

//设置所有img的src和alt
$("img").attr({ src: "test.jpg", alt: "Test Image" });

//移除某个属性
$("img").removeAttr("src");

//prop
//获取在匹配的元素集中的第一个元素的属性值。

//addClass
//为每个匹配的元素添加指定的类名。
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

//removeClass
//从所有匹配的元素中删除全部或者指定的类。
$("p").removeClass("selected");

//html
//获取匹配元素的html
$('p').html();
//设置匹配元素的html
$("p").html("Hello <b>world</b>!");

//text
//获取匹配元素的text文本内容
$('p').text();

//设置匹配元素的text文本内容
$("p").text("Hello world!");

//val获得匹配元素的当前值。
$("input").val();
//设置匹配元素的值
$("input").val("hello world!");

css

//css访问匹配元素的样式属性。
$("p").css("color");
//设置值
$("p").css({ "color": "#ff0011", "background": "blue" });
$("p").css("color","red");

//position
//offset

//scrollTop获取匹配元素相对滚动条顶部的偏移。
var div1 = $(".div1");
div1.scrollTop();
//这个可用作返回顶部，比如页面往下滚动了一段的时候，就出现返回顶部的图标，点击就可以返回顶部。
//也可以设置相对滚动条顶部的偏移
div1.scrollTop(10);

//scrollLeft获取匹配元素相对滚动条左侧的偏移。
//此方法对可见和隐藏元素均有效。

//height width 可以获取或者设置值
$("p").height();
$("p").width(20);