我的Jquery学习笔记

原创 2013年12月03日 10:33:50
第一堂课
1、将jquery引入到html页面
       <script type="text/javascript" src="../script/jquery-1.5.js"></script>
第一个代码:
  <head>
<script type="text/javascript" src="../script/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(                     //此句可以替换为 $(function()  {}    )
function(){
windows.alert("Hello World");
});
</script>
</head>


2、将jQuery对象转换为DOM对象
var $ obj = $("#id");       //将html标签id为“id”的定义为ojb的jQuery对象
var dom = $obj[0];         //将jQuery对象转换为DOM对象
3、将DOM对象转换为jQuery对象
var dom = document.getElementById("p");        
var $ dom = $ (dom );
4、jQuery开发工具   EditPlus




第二堂课 jquery选择器
A:基本选择器
1、标签选择器
<body>  <h1>这是一号标题</h1>     <p>这是一个<b>自然段</b></p>  </body>
  $("h1");  //获取<h1>标签
$("p");   //获取<p> 标签
2、id选择器
<body>  <h1 id="one">这是一号标题</h1>     <p  id="two">这是一个<b>自然段</b></p>  </body>
$("#one");         //获取id为one的标签
$("#two");         //获取id为two的标签
3、类选择器
<body>  <h1 class="bt">这是一号标题</h1>     <p  class="dt">这是一个<b>自然段</b></p>  </body>
$(".bt");         //获取class为bt的标签
$(".dt");         //获取class为dt的标签
4、通配符选择器
$("*")           //表示选取所有的元素
5、群选择器
$("p, #two, span");            //表示同时选取所有的p标签、id为two的标签、所有的span标签




B:层次选择器
1、后代选择器      $("ancestor descendant");   表示选择父元素的所有子元素。
     
2、子选择器         $("parent > child ");       表示选取父元素的直接子元素,不包括其孙元素
<body>
<div id="parent">
<div class="one" id="one">我是class为one, id也为one的div  
<div class="mini" id="two">我是class为mini, id为two 的div  </div>
</div>
</div>
</body>

(1)  $("body div"); 返回的结果是选择body标签内的所有的三个div标签
(2)$("div #parent > div");
返回的结果是id值为parent的div标签的直接子节点,就是选择id值为one的div标签,id值为two的标签不被选中。
后代选择器举例:
$("body div" ); 选取body标签下所有的div标签
$("ul li "); 选取ul标签下所有的li标签
$(" #one div") 选取id为one的标签所包含的所有的div子标签
$("div #one div")  选取id为one的div标签所包含的所有的div子标签
$(".one div") 选取class为one的标签所包含的所有的div子标签
$("div .one span") 选取class为one的div标签包含的所有的span子标签
$(".one .two ")      选取class为one的标签所包含的所有的class为two的标签
子选择器举例:
$("body > div") 选取body标签下所有的第一级div子标签
$("ul > li") 选取ul标签下所有的第一级li子标签
$("#one > div") 选取id值为one的标签所包含的所有的div子标签
$("div #one div ")  选取id为one的div所包含的所有的div子标签
$(".one div") 选取class为one的标签所包含的所有的div子标签
$("div .one span") 选取class为one的div标签所包含的所有的span子标签
$(".one .two")        选取class为one的标签所包含的所有的class为two的标签


3、+和~选择器
$("prev + next ")    选取紧接在prev标签后的next标签,其中这两个标签是同级别的
可以使用next()方法代替 + 选择器  如:  $(".one + div ")  可以被替换成   $("one).next("div")


             $("prev ~ sibling")   表示选取prev标签后的所有兄弟标签
可以使用nextAll()方法代替~选择器  如: $(".one ~ div ")   可以被替换成  $(".one").nextAll("div")  
表示选取class为one的标签后门所有的兄弟标签。







3、过滤选择器
过滤选择器是通过一些指定的过滤规则来筛选出所需的标签,选择器都以一个冒号:开头。
A、基本过滤选择器
:first 匹配找到的第一个元素 $("div:first")    选取所有div元素的第一个div元素
:last 匹配找到的最后一个元素 $("div:last") 选取所有div元素的最后一个div元素
:even 匹配所有索引值为偶数的元素,从0开始计数 $("tr:even")  选取索引是偶数的表格行
:odd 匹配所有索引值为奇数的元素,从0开始计数 $("tr:odd") 选取索引值奇数的表格行
:eq(in) 匹配索引等于in的元素,索引是从0开始计算 $("tr:eq(1)") 匹配表格的第二行
:gt(in) 匹配索引大于in的元素, $("tr:gt(0)") 选取索引大于0 的表格,也就是表格的第一行以后的行
:lt(in) 匹配索引小于in的元素, $("tr:lt(2)") 匹配比2小的索引值,也就是表格的第一行和第二行
:header 匹配所有的h1、h2、h3...h7一类的标签 $(":header") 选取网页中所有的的h1、h2、h3...h7
:animated  匹配所有正在执行动画效果的所有元素 $("div:animated") 选取正在执行动画的div元素

B:内容过滤选择器
用来过滤所包含的子元素或者文本内容
:contains(text) 匹配包含给定文本的元素 $("p:contains('jarry')") 查找所有包含"jarry"文本的p标签
:empty 匹配所有不包含子元素或者文本的空元素 $("div:empty") 查找所有不包含子元素或者文本的div空标签
:has(selector) 匹配含有选择器所匹配的元素的元素 $("div:has(li)".addClass("wap")   给div标签中所有包含li标签的元素添加一个wap类
:parent 匹配含有子元素或者文本的元素 $("td:parent") 查找拥有子元素或者文本的td标签


C:可见性过滤选择器
根据标签或元素的可见性来选择标签或元素
:hidden 匹配所有看不见的标签或者元素 $("input:hidden") 查找不可见的input标签
:visible 匹配所有看不见的标签或者元素 $("div:visilble") 查找所有可见的div标签


D:属性过滤选择器
通过标签或元素的属性来选取标签或者元素
[attribute] 匹配包含给定属性的元素 $("p[id]") 查找所有包含id属性的p标签
[attribute=value] 匹配给定的属性是value值的元素 $("p[id='abc']") 查找所有id属性值为abc的p标签
[attribute != value] 同上反
[attribute ^=value] 匹配给定的属性是以value值开始的元素 $("p[id ^='abc']")
[attribute $=value] 匹配给定的属性是以value值 结尾的元素 $("p[id $='abc']")
[attribute *= value] 匹配给定的属性是包含value值的元素 $("p[id *='abc']")
[attr1][attr2][attr3] 复合属性选择器需要同时满足多个条件时使用 $("div [id] [id ^='abc']")



E:表单对象属性过滤选择器
主要对所选择的表单元素进行过滤,如可用、不可用、选择、被选择等。
:enalbed 选取所有可用的表单对象 $(" #name:enabled") 选取所有id值为name的表单内的所有可用表单对象
:disabled 选取所有不可用的表单对象 $(" #name:disabled") 选取所有id值为name的表单内的所有不可用表单对象
:checked  选取所有被选中的表单对象(主要是radiobox和checkbox)  $("input:checked")  选取被选中的input表单对象
:selected  选取所有被选中的选项(主要是下拉列表selecte)      $("select:selected")   选取所有被选中的选项
F:表单选择器
:input $(":input")
:text 选取所有单行文本框 $(":text")
:password $(" :password")
:radio $(" :radio")
:checkbox $(" checkbox")
:submit $(" :submit")
:image 选取所有图像按钮 $(" :image")
:reset 选取所有重置按钮 $(" :reset")
:button 选取所有按钮 $(" :button")
:file 选取所有的上传域 $(" :file")
:hidden 选取所有不可见元素 $(":hidden")


如果要得到表单元素的个数,则使用length方法    $(" #myform :input").length  获取id为myform的表单内的所有input元素的个数


G:子元素过滤选择器 主要是针对父元素和子元素之间做出选择
:nth-child(index/even/odd/equation) 陪陪其父元素下的第index个 或奇偶元素(从1开始计算)
$(" ul li :nth-child(2) ")   在每个ul标签中查找第2个例标签
:first-child 匹配每个父元素的一个子元素 $(" ul li :first-child") 查找每个ul中查找第一个li
last-child 匹配每个父元素的最后一个子元素
:only-child 如果某个元素是父元素中的唯一一个子元素,则匹配;否则不匹配






第三堂课     jQuery中的DOM
一:查找DOM节点
1、查找元素节点    例如:
<script type="text/javascript" src="../scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$().ready(function(){ //$().ready(function() {}) 可改写成 $(document).ready(function(){})
var $ li = $("ul li :eq(1) " ); //获取ul中的第2个li元素节点
var text = $li.text (); //取得第2个li元素节点的文本内容
window.alert(text); //输出该文本内容
})
</script>

2、查找属性节点   用attr()方法
用法1:attr("属性值") 可以方便的从匹配元素中获取一个属性的值,如果没有相应属性则返回 undefined
用法2:attr("属性名称", "属性值")       为所有匹配的元素设置一个属性值,主义这个返回值是一个对象,可以再次使用attr()方法显示设置后的更新过的属性值


<script type="text/javascript src="../scripts/jquery-1.5.js"></script>
<script type="text/javascript">
$().ready(function(){
var li = $("ul li:eq(0)" ); //获取ul元素的第一个li元素节点
var li_attr = $li.attr("title"); //获取li元素节点的title属性节点的值
window.alert(li_attr);

var li_set_attr = $ li_attr("title", "this is php");
window.alert(li_set_attr.attr("title") );


})
</script>


二、创建DOM节点
1、创建元素节点       直接用$()来完成 如:
var $ li_one = $("<li></li>");          //创建第一个li元素
var $ li_two = $("<li></li>");
$("ul").append ($ li_one); //将第一个li添加到ul中
$("ul").append($ li_two);
2、创建文本节点    方法:在创建元素节点时直接将稳步内容写出来
var $ li_one = $("<li>asp</li>");
var $ li_two = $("<li>php</li>");
$("ul").append($ li_one);
$("ul").append($ li_two);


3、创建属性节点   方法同上类似,直接将属性内容写出来就可了
var $ li_one  = $("<li title='asp'>asp</li>");
var $ li_two = $(" <li title='jsp'>jsp</li>");
$("ul).append($ li_one); $("ul").append($ li_two);
三、插入DOM节点
1、append()方法    同上
2、appendTo() 方法 $("<p>Dom</p>").apendTo(".inner");
3、preend()方法  这是向匹配元素内部的开始处插入内容的最佳的方式   $(".inner").prepend("<p>DOM</p>");
4、prependTo()
5、after()在每个匹配的元素节点之后插入内容 $(".inner").after("<p>Dom</p>");
6、insertAfter()在每个匹配的元素节点之后插入内容 $("<p>Dom</p>").insertAfter(".inner");
7、before()  在美国匹配的元素节点之前插入内容 $(".inner").before("<P>Dom</p>");
8、insertBefore()
四、删除DOM节点
1、remove()  从DOM中删除所有匹配的元素     
<ul>
<li class="'hello">Hello </li>
<li class = "inner"> jQuery </li>
</ul>
$(".hello").remove(); //删除class为hello的元素,不带参数
$("li").remove(".hello") //删除class为hello的元素,带参数
2、empty()  不是删除节点,而是清空节点
$(".hello").empty();
五、复制DOM节点——clone()
<ul>
<li class="'hello">Hello </li>
<li class = "inner"> jQuery </li>
</ul>
$(".hello").clone().appendTo(".inner");   说明复制后的新节点不具备任何行为,所以需要把行为也一起复制,可用clone(true)来复制行为


六、替换DOM节点
1、replaceWith(content)
2、replaceAll(content)
$(".hello").replaceWith("<li>replaceWith</li>" );
七、包装DOM节点
1、wrap()用其他元素的结构化标记包装起来 $("li").wrap("<b></b>");
2、wrapAll() $("li").wrapAll("<b></b>");
3、wrapInner()将每一个匹配的元素的子内容,包括文本节点包装起来 $("li").wrapInner("<b></b>");
八、DOM节点属性操作
1、attr()
2、removeAttr()删除某个元素的属性 $("li").removeAttr("class")
九、DOM节点Css属性
1、addClass()追加css样式
<ul class="one"> <li>hello</li> <li>jQuery</li> </ul>
执行$("ul").addClass("two")后变成:<ul class="one two"> <li>hello</li> <li>jQuery</li> </ul>
2、removeClass()删除css类
$("ul).removeClass("one");
$("ul).removeClass("one two"); //删除两个class时,用空格分开
$("ul).removeClass() //不带参数时,表示删除全部class


3、toggleClass()控制样式的重复切换,如果样式类名存在,则删除;若不存在,则添加。
<ul> <li class = "one">hello</li> <li >css</li> </ul>
运行 $("li").toggleClass("one");   后,变成了
<ul> <li >hello</li> <li class = "one">css</li> </ul>


4、hasClass()用来判断元素中是否含有某个class,若有,返回true;若无,返回false;
var hasClassOne = $("li").hasClass("one");
十、Dom节点文本的值
1、html()   读取和设置元素中的HTML内容,此函数不能用于XML文档,但可以用于XHTML。
<ul class="one")>
<li class="one">Hello</li> <li class="two">jQuery</li> <li>three</li>
</ul>


$().ready(function(){
var html = $("ul").html(); window.alert(html);
})


运行上面代码后的的结果是:请自己运行


2、text()读取或设置元素节点的文本内容,此方法对html和xml文档都有效。
<ul class="one")>
<li class="one">Hello</li> <li class="two">jQuery</li> <li>three</li>
</ul>
var txt = $("li:eq(0)").text();
$(li:eq(1)").text("这是修改后的JQuery"); window.alert(txt);
3、val()设置和获取元素的值 check、select、 radio等表单元素都能使用为赋值,如果多选,将返回一个数组,并包含所选的值
<script type="text/script>
$().ready(function(){
var s = $("#h").val(); window.alert(s);
$("#w").val("JQUERY");
})
</script>
<input id="h" value="hello" /> <input id="w" value="world" />  自己运行看结果




十一、遍历DOM节点
1、children()   只考虑子元素,而不考虑所有后代元素,取得一个包含匹配元素的所有子元素的集合,返回值是jQuery对象。
parents()将查找所有祖辈元素
$("body").children();
2、next()取得一个包含匹配的元素集合中,每个元素紧邻的后面同辈元素的集合,只是返回后面那个紧邻的同辈元素
    nextAll()     返回后面所有的同辈元素
$("p").next();
3、prev() 与next()相反
4、siblings()  可以得到匹配元素前后所有的同辈元素          $("div").siblings()
十二、DOM中的Style
用css()来对style对象的属性进行操作、读取、设置
读取css属性值 var txtColor = $("span").css("color"); var txtHeight = $("p").css("height")
设置css属性值 $("span").css("color", "red"); $("p").css("height","30");






第四堂课 jQuery的事件和动画





















版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery学习笔记

  • 2016-01-08 21:30
  • 898KB
  • 下载

OpenLayers学习笔记9——使用servlet与jquery-ui实现自动提示输入

做软件都要从用户的角度来做,怎么样让用户输入的更少,体验更好,我们就应该怎么来做,也就是需求驱动,客户都是大爷!题外话说完了,步入正题,本文实现在查询时输入查询条件时,自动提示数据库中包含改值所有记录...

jQuery验证框架学习笔记

  • 2012-07-31 09:32
  • 322KB
  • 下载

jQuery学习笔记

  • 2013-03-26 23:20
  • 15KB
  • 下载

jQuery HTML操作学习笔记

学习资料jQuery教程 获取1.获取、设置元素的内容1.1获取或设置目标元素的文本内容语法$(selector).text(); 获取元素文本内容 $(selector).text(content)...

jquery学习笔记

jQuery学习笔记

  • 2009-11-15 09:15
  • 160KB
  • 下载

Yii2 framework学习笔记(八) -- 整合blueimp的jquery-file-upload插件

jquery-file-upload(http://blueimp.github.io/jQuery-File-Upload/)是一个优秀的文件ajax上传插件,支持多选,预览,并发上传等。 jq...
  • iyak85
  • iyak85
  • 2016-02-26 17:47
  • 1486

JQuery学习笔记

  • 2011-01-16 23:19
  • 309KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)