jquery学习笔记韩顺平.docx

第三讲：

jquery过滤选择器及练习题讲解

1,层次选择器：

（1），prev+next表示选择prev的下一个元素（强调：

同一级）

（2），prev~siblings表示选择Prev的后面的所有元素（强调：

同一级）

例子：

$（'#b3'）.click（function（）{

$（'#one*div'）.css（"background","#0000FF"）;

}）

$（'#b4'）.click（function（）{

$（'#two~div'）.css（"background","#0000FF"）;

}）

2,过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都已":

"开头;按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器；

3，例如：

$（'#b1'）.click（function（）{

$（'div:

first'）.css（"background","#0000FF"）;

//表示先找到第一个div标签，然后选择第一个div标签

}）;

4,//改变class不为one的所有div元素的背景色为#0000FF;

$（'#b3'）.click（function（）{

//先选择所有div，然后再过滤

$（"div:

not（.one）"）.css（"background","#0000FF"）;

//one表示一个类名;表示去除类名为one的

}）;

5,$（"div:

even"）;//表示先找出所有的div然后把偶数过滤出来，":

"就表示过滤的意思；

6，经典案例：

$（"table:

eq（0）tr:

even"）.css（"background","red"）;

//表示先选中第一个表格，有一个空格然后选择tr中索引为偶数的偶数列；第0列也为偶数列；

7,

第四讲：

1，内容过滤，根据内容选择器；

$（'#b1'）.click（function（）{

$（"div:

contains（'di'）"）.css（"background","#0000FF"）

}）

2,......用到的时候再查

3，只要是jquery操作的选择的它都默认返回的都是一个集合；

4，可见度过滤选择器：

可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素：

1，：

hidden用法：

$（"tr:

hidden"）返回集合元素，说明，匹配所有的不可见元素，Input元素的type属性为"hidden"的话也会被匹配到，意思是css中display:

none和inputtype="hidden"的都会被匹配到，同样，要在脑海中彻底分清楚冒号":

",点号"."和逗号","的区别；

2,:

visible用法：

$（"tr:

visible"）返回值集合元素说明：

匹配所有的可见元素；

5,该选择器是根据元素的可见性来选择对象，只要是通过jquery选择器选出来的对象都是jquery对象；

6，//改变所有可见的div元素的背景色为#0000FF

$（'#b1'）.click（function（）{

$（'div:

visiable'）.css（"background","#0000FF"）;

}）

7,

$.each（[1,"sp",4],function（i,n）{

alert（i+""+n）;//其中i表示索引值，n表示当前索引对应的值

}）

8,vararr2=[{"name":

"小明"},{"name":

"大明"},{"name":

"老明"}];//arr2为对象集合

$.each（arr2,function（i,n）{

alert（i+""+n.name）;//name为取得对象的属性；

}）

//jquery的方法：

$.each（$objs,function（i,obj）{

//这里i为索引变量，obj为取出的dom对象；obj=$objs[i]

window.alert（"jquery对象"+$（obj）.val（））;//就可以取出对象的值了

}

）;

$.each（$objs,function（）{

//每循环一次，就相当于从数组中取出一个对象；必须把this要包一下；相当于this=$objs[i];此时this就是一个dom对象，所以必须要把this要包一下;

window.alert（"jquery2"+$（this）.val（））;

window.alert（"dom"+this.value）;//和上一句等价

}）

第五讲：

课程回顾

1，使用jquery中有两种对象；一种dom对象【传统的】，一种jquery对象；

2，“T”型人才；

3，在jquery开发中，我们把一个对象当做一个集合来处理的；

4，jquery为什么这么流行呢这是因为它提供了九大选择器；

5，基本选择器是用的最多的，最基本的往往都是最重要的；

6，$（"bodydiv"）;//表示把body下的所有的div都选中；

$（"body>div"）;//表示把body下的第一级选中【儿子辈】，不包括孙子辈哦；

prev+next表示选择prev的下一个元素（强调：

同一级后面的兄弟，只选择一个）；

prev+siblings表示选择prev的后面的所有元素（强调：

同一级后面的所有兄弟元素都会被选中）;

7，选中文本中不含有di的div：

$（"div:

not（:

contains（'di'））"）

8,$（:

hidden）==>会把style[display:

none]和里的都选中;

$（:

visible）==>会选中所有可见的元素；

停：

2014-09-1117:

30

第六讲:

属性过滤选择器

1,选出含有属性title的div元素：

$（"#b1"）.click（

function（）{

$（"div[title]"）.css（"background","green"）;

}

）;

2,属性title值等于test的div元素

$（"#b2"）.click（

function（）{

$（"div[title=\"test\"]"）.css（"background","green"）;

}

）;

3,找到属性title值以te开始的div元素

$（"#b3"）.click（

function（）{

$（"div[title^='te']"）.css（"background","red"）;

}

）;

4,找到属性title的值，以est结束的div元素

$（"#b5"）.click（

function（）{

$（"div[title$='est']"）.css（"background","red"）;

}

）;

5,属性title值，含有es的div元素

$（"#b6"）.click（

function（）{

$（"div[title*='es']"）.css（"background","red"）;

}

）;

6,选取有属性id的div元素，然后再结果中选取属性title值含有"es"的div元素

$（"#b7"）.click（

function（）{

$（"div[id][title*='es']"）.css（"background","red"）;

}

）;//属性使用"[]"来进行过滤的

7,我们的过滤方式有两种：

比如选出文本中含有abc的div$（"div:

contains['abc']"）

凡是跟属性过滤有关的属性和属性值的过滤我们就用"[]",其他就用":

";

第七讲：

子元素选择器表单对象属性选择器

1，//每个class为one的div父元素下的第2个子元素

$（'#b1'）.click（

$（"div.one:

nth-child

（2）"）.css（"background","red"）;

）

2,//每个class为one的div父元素下的第一个子元素

$（'#b2'）.click（

function（）{

$（"div.one:

first-child"）.css（"background","red"）;

等价于：

$（"div.one:

nth-child

（1）"）.css（......）;

}

）;

3,//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素【就相当于独生子女】

$（'#b4'）.click（

function（）{

$（"div.one:

only-child"）.css（"background","red"）;

}

）;

4,利用jquery对象的val（）方法改变表单内type=text可用元素的值

$（'#b1'）.click（

function（）{

$（"input[type='text']:

enabled"）.val（"hello"）;

}

）;

5,jquery对象在它使用的过程中都是当做一个集合来对待的，所以所有的jquery对象都有length属性；

6，利用jquery对象的length属性获取多选框中选中的个数

$（"#b3"）.click（

function（）{

//alert（$（":

checkbox:

checked"）.length）;

alert（$（"input[type='checkbox']:

checked"）.length）;

}

）;

7,总结一下过滤器使用的方式：

$（"div.contains（'di'）"）;//按内容进行过滤；

$（"div[type]"）;//按属性进行过滤；

$（"div.one"）;//选中div中含class为one的div元素；

$（"div,.one"）;//选中div和class为one的div元素；

8,利用jquery对象的text（）方法获取下拉框选中的内容

$（"#b4"）.click（function（）{

alert（$（"selectoption:

selected"）.text（））;//如果用.val（），则只选中一个，val（）针对一个而言；

//它会把你选中的内容弹出来

}）

第八讲：

jquery对象集合遍历的四种形式及练习题讲解

1，总结jquery对象集合遍历的四种形式：

var$objs=$（"selectoption:

selected"）;

$.each（$objs,function（）{

alert（"$（this）.val（）"）;

}）

$.each（$objs,function（i,n）{

//alert（n.value）//n为dom对象

alert（$（n）.val（））;

}）

$objs.each（function（）{

window.alert（$（this）.val（））;

}）;

$objs.each（function（i,n）{

window.alert（"ok"+$（n）.val（））;

}）;

2,选择器选择原则：

1），选择什么样的选择器要根据需求来定；

2），如果针对文档内容，则使用内容选择器；

3），如果是选择父子（祖先，后代）元素则使用层次选择器；

4），如果是根据id/class/tagname则使用基本选择器；

5），如果是选择表单中的元素，则使用表单选择器，表单对象属性选择器；

6），根据可见性选择元素，则使用可见性选择器；

7），如果是选择某个元素中包含某个属性（属性值），则使用属性选择器；

8），！

！

！

如果考虑对选中的元素，要进行过滤，则使用过滤选选择器，（有三种方法）

$（"div:

contains（'di'）"）;//内容

$（"div[type]"）;//属性

$（"div.one"）;//选中div中含class为.one的div元素；

3，jquery中的dom操作：

4，DOM（DocumentObjectModel--文档对象模型）：

一种与浏览器，平台，语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。

DOM操作的分类：

XML-DOMHTML-DOM和CSS-DOM三种；

5，//给id为first的数据添加样式类one:

$（'#b1'）.click（

function（）{

$（'#first'）.attr（"class","one"）;

}

）;

//追加样式：

addClass（）

#（'#b2'）.click（{

$（'#first'）.addClas（"one"）;

}）;

//移除样式：

removeClass（）----从匹配的元素中删除全部或指定的class

$（'#b3'）.click（

function（）{

$（"#first"）.removeClass（"one"）;

}

）;

第九讲：

1，AJAX和Jquery整合

第十讲：

jquery的dom操作内部插入外部插入

1，启动weblogic的shell命令：

nohupshstartWebLogic.sh&

2,cduser_projects/domains/base_domain/

3,ps-ef|grepweblogic

4,kill-919271//weblogic的进程号码为最长的那个[几行呢哦]

5,top-uweblogic

6,重启weblogic的话倒序执行这些shell命令；

--------------------------------------------

1,例子：

//添加重庆到上海下面

$（"#b1"）.click（function（）{

//jquery方法

//重庆

//有两种方法

//1,一步到位

$myli=$（"重庆"）;

//我们先使用内部插入

$（'#city'）.append（$myli）;表示在$（'#city'）对象内部添加后添加$myli；

}）;

//以上功能我们通过dom逐步实现代码如下：

$myli=$（"

$myli.attr（"id","cq"）;//<===>重庆

$myli.attr（"name","chongqing"）;

//把$myli添加到上海

$（'#city'）.append（$myli）;//这种方法可以分布操作;

//如果使用appendTo这应当这样使用：

$myli.appendTo（"#city"）;//表示把$myli添加到$（"#city"）对象的内部后面；

//append和appendTo在大部分作用是一样的；

2,