jquery(1)

1.js javascript

弱类型(var) 解释性 运行在客户端(浏览器)的脚本编程语言

html：静态页面

：弊端---交互性极差

js:改善html的交互性

：弊端--操作繁琐，功能不够强大

：document.getElementById("xx");

document.getElementsByName("xx");

document.getElementsByTagName("xxx");

//向id为con的div 中添加<p>c38</p>

var div=document.getElementById("con");

var p=document.createElement("p");

var txt=document.createTextNode("c38");

p.appendChild(txt);

div.appendChild(p);

//向id为con的div 中添加<p>c39</p>

addP("c39");

<div id="con">

<p class="a">c35</p>

<p>c36</p>

<p>c37</p>

</div>

function addP(a){

var div=document.getElementById("con");

var p=document.createElement("p");

var txt=document.createTextNode(a);

p.appendChild(txt);

div.appendChild(p);

}

===================================================================

2.jquery:js通用功能进行封装，是的js开发变得简易，强大。

：js的工具库(框架)

：标签的选取、标签的操作(dom)、事件管理....

==================================================================

3.jquery开发流程：

*导入jquery依赖

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

*jquery使用

...

==================================================================

4.jquery对于标签的选取：选择器

4.1 基本选择器：

*ID选择器：$("#ID值")

var a=$("#con");//选取出id为con的标签

*元素选择器：$("标签名")

var a=$("div");//选取出div标签

*类选择器：$(".样式类名")

var a=$(".a");//选取出样式类名为a的标签

*jquery方法：show([1000]) hide([1000]) text() ...

*注意：选取标签：

1>document.getXXXXX 返回dom对象

2>选择器 返回jquery对象

区别：只有jquery对象才可以使用jquery方法。

4.2 多选择器共用

*交集(且)

$("p#con.c35");//选取的标签：是p标签且id为con且类名为c35

*注意：为避免歧义，注意将元素选择器放置在第一个位置

$(".c35#conp")--歧义

$("p.c35#con");--无歧义

*并集(或)

$("p,#con,.c35");//选取的标签：是p标签或id为con或类名为c35

4.3 层级选择器

*jquery对于多选择器共存时的解析规则：从左到右依次解析

*后代选择器：$("selectorA selectorB ....")

*父子选择器：$("selectorA>selectorB>.....")

*紧邻的后续兄弟选择器：$("selectorA+selectorB+.....")

*所有后续兄弟选择器：$("selectorA~selectorB~.....")

4.4 简单过滤选择器

*:first 在已有范围中选取第一个

$("input:first") 第一个input标签

*:last 在已有范围中选取最后一个

$("input:last") 最后一个input标签

*:eq(index) 在已有范围中选取对应的索引位置上的元素

$("div:eq(5)")

*:gt(index) 在已有范围中选取索引大于对应的索引位置上的元素

$("div:gt(5)");//找出div中索引大于5的。

*:lt(index) 在已有范围中选取索引小于对应的索引位置上的元素

$("div:lt(5)");//找出div中索引小于5的。

*:even 在已有范围中选取索引为偶数的元素

*:odd 在已有范围中选取索引为奇数的元素

*:not(selectorA) 在已有范围中剔除掉selectorA元素

4.5 内容过滤选择器 --内容：子标签/标签体中文本

*:empty 在已有范围中选取出没有内容的元素

*:parent 在已有范围中选取出含有内容的元素

*:contains(text) 在已有范围中选取出含有对应文本的元素

*:has(selector) 在已有范围中选取出含有selectorA后代的元素

4.6 可见性过滤选择器

*:visible 过滤出可见元素

*:hidden 过滤出隐藏元素（包含隐藏域）

4.7 属性过滤选择器

*[属性名] 选取出含有该属性的元素

*[属性名=属性值] 选取出属性值为指定值得元素

4.8 表单选择器：

*:checked 适用于 单选按钮和复选按钮

*:selected 适用于 下拉列表(option)

4.9 遍历：

var ck=$("input[type='checkbox']:checked");

//遍历多个元素

for(var i=0;i<ck.size();i++){

//获取当前元素

//通过get方法获取的是dom对象

var c=ck.get(i);

//console.log(c.val());--错误

console.log(c.value);

}

==================================================================

特别：常用子页面给父页面赋值，父页面给子页面赋值

子页面：

var value1="";

window.opener.document.getElementById("parentPageId1").value=value1;

父页面：

var value2="";

//弹出框

window.open("url?param="+value2,"子页面title","'height=300,width=800,top=60,left=60,toolbar=no,menubar=no,
resizable=no,location=no,scrollbars=yes,status=no");