jQuery 学习start up

来源：互联网发布：js读取cookie 编辑：程序博客网时间：2024/05/16 07:57

暑假大体学习了js，但是一直没怎么用过，jquery倒是相对来说比较广泛，虽然主要核心放在后端，但是前端的这些东西还是用会的，jquery只是了解过，直到选择器，和相应的大体操作，一直想学习一下jquery，最近整理了一下，专心学习下jquery。

这次是我首次通过视频学习一门技术，之前都是看书，这次我是和视频和述一块学习的，主要在视频上边看边实践，我会在代码里整理上知识点，然后附上联系代码，然后书看的是大名鼎鼎的《锋利的jQuery》。

可以在这里学习完整的API！！！

jquery 对象和 DOM对象是不一样的。
dom 对象-->jquery对象
var obj = document.getElementById("id");
var jqueryObj = $(obj);
jquery 对象-->dom对象
var jqueryObj = $("#id");
var obj = $jqueryObj[0];

首先学习的是选择器，一切都是通过选择器来进行操作，是基于CSS的。首先学习的是基本选择器和层次选择器.以及各种过滤选择器和表单过滤选择器

<!DOCTYPE html><html><head><title>learnjquery-1</title><script type="text/javascript" src="jquery-2.1.1.js"></script><style type="text/css">.empty-div {width: 30px;height: 30px;position: }</style></head><body><h1 class="h1-1">this is hearder tag !1</h1><h2>this is hearder tag !2</h2><h3>this is hearder tag !3</h3><h4>this is hearder tag !4</h4><h5>this is hearder tag !5</h5><h6>this is hearder tag !6</h6><br/><br/><div><p>this <strong>is the</strong>1 p tag</p><p>this is the 2 p tag</p></div><div class="empty-div"></div><p title="attribute-1">this is the 3 p tag<br/>上篇文章中我们已经对JMS的基本模型有了基本的了解.下面内容主要是通过一张图来了解JMS的编程模型,并用一个实例来进行辅助说明. 下面这张图是JMS的编程模型,        Connection Factory      创建Connection对象的工厂，针对两种不同的JMS消息模型，分别有QueueConnectionFactory和TopicConnect...</p><p>this<span>is the</span>4 p tag</p><div><p class="filter-1">this is the 5 p tag</p><p class="filter-2">this is the 6 p tag</p><p class="filter-3">this is the 7 p tag</p></div><div myAttr="keng"><text>i am a programer!</text></div><div title="attribute-2">在上篇文章中我们对EJB有了一个基本的了解,因为要继续介绍EJB的相关分类,而在分类中有一个是消息驱动Bean(MessageDriverBean),而MDB是基于JMS(Java Message Service，Java消息服务),所以在这里很有必要对JMS进行了解.         什么是JMS?         JMS(Java Message Service)是Java的消息服...</div><form><input type="hidden" name="" id=""  value="I am hidden!"><input type="text" name=""  id=""  value="i am the text input" /><br /><input type="password" name=""  id=""  value="" /><br /><input type="button" name=""  id=""  value="i am button" /><br /><input type="submit" name=""  id=""  value="i am submit" /><br /><input type="radio" name=""  id=""  value="i am sigle radio" /><br /><input type="checkbox" name=""  id=""  value="i am checkbox111"  checked="checked" /><input type="checkbox" name=""  id=""  value="i am checkbox222" /><input type="checkbox" name=""  id=""  value="i am checkbox333" /><input type="checkbox" name=""  id=""  value="i am checkbox444" /><br /><input type="reset" name=""  id=""  value="i am reset" /><br /><input type="file" name="" id=""  value="file!!" /><br /><textarea>i am text area!!!</textarea><br /><select><option value="111111" >i am the seelct item 111111</option><option value="22222">i am the seelct item 22222</option><option value="333333">i am the seelct item 333333</option><option value="444444" selected="selected">i am the seelct item 444444</option></select><input type="image" src="http://www.baidu.com/img/logo_newyear_skin_e72e12e95174c1780686693c835bfd5e.png" alt="" /></form><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><!-- JS Jquery --><input type="text" name=""  id=""  value="i am the text disabled input"  disabled="disabled" /><br /><input type="text" name=""  id=""  value="i am the not disabled text input" /><br /><div id="first">1<span>1.1</span><span>1.2</span><div>1.3<span>1.3.1</span></div></div><script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script><script type="text/javascript">    $(function () {        $("#first>span").css("color", "red");    });  </script><script type="text/javascript">//1\base selector //2\.层次选择器$(document).ready(// $('div p').css("background", "green")//;// $('div>p').css("background","green")//different// $('div+p').css('background', 'green') // next()// $('div~p').css("background","green") //newAll()//$('div p strong').css("background","green") //// $('h1.h1-1').css("background","green")/* Fliter selector*/// $('p:first,p:last').css("background","green")// $('p:last').css("background","green")  不能同时写在两行里，可以写在一个选择器里 // $('p:not(".filter-1")').css("background", "green") // $('p:even').css("background", "green")// ou// $('p:odd').css("background", "green") //ji// $('p:eq(2)').css("background", "green")// $('p:lt(2)').css("background", "green")// lower than // $('p:gt(2)').css("background", "green") // greater than // $(':focus').css('background','pink')// $(':header').css('background','pink')/*内容过滤选择器*/// $('div:contains("programer!")').css('background', "pink")// $('div:empty').css('background', "pink")// $('div:has(p)').css('background', "pink")// $('div:parent').css('background', "pink")// 可见性过滤选择器   -->> :hidden   :visible/*属性过滤选择器*/    //可以定义不存在的自己定义的属性    // $('p[title="attribute-1"]').css('background','pink')    // $('p[title]').css('background','pink')    // $('div[myAttr]').css('background','green')    /*子元素过滤选择器*/    // $('div p:first-child').css('background','rgb(28, 106, 150)')    // $('div p:nth-child(3)').css('background','rgb(28, 106, 150)')    /*表单选择器*/    // alert($('input').length) is different!!!!// alert($(':input').length)    // $(':text').css('background','rgb(28, 106, 150)')    // $(':password').css('background','rgb(28, 106, 150)')    // alert($(':radio').val())    // alert($('input[type="radio"]').val())    // hidden opacity  visible difference    /*表单属性选择器*/    // alert($('input:disabled').val())    // alert($('input:enabled').val())    // alert($('input:checked').val()) the same as !!!!// alert($('input[checked="checked"]').val())    // alert($(':selected').val())     // alert($('select option:selected').val())    // alert($('select:selected').val())  //alert:  --> undefined!!);</script></body></html>

0 0