JQuery学习札记(1)

JQuery学习笔记(1)
1.根据ID获取指定的元素

<body>

<inputid="inputID"type="button"value="这就是jQuery框架,写少代码，做多事情"/>

<divid="divID">哈哈...</div>

<hr>

<scripttype="text/javascript">

//取得<input>标签中的value属性的内容

var $input = $("#inputID");//根据id获取指定元素

var input = $input.val();//获取元素指定属性的值 （val()方法相当于dom对象中的value属性）

document.write(input);//输出到页面上

document.write("<hr><br/>");

//取得<div>标签中的文本内容

var $div = $("#divID");

var txt = $div.html(); //获取元素中内容，相当于dom对象中的innerHTML属性

document.write(txt);

小结：

1.使用jquery根据id获取某个元素时，要使用#号开头，eg：$(#inputID)；

2.dom对象中的属性在jquery中一般都被封装成方法了，eg：

dom对象 jquer对象

value属性 val()

innerHTML属性 html()

length属性 size() ⊙jquery中也有length属性，其功能和size()方法一样

调用方法或属性的时候不能张冠李戴。

</script>

</body>

2.DOM操作与jQuery操作对错误的处理方式的比较

Dom在找不到指定的元素时没有任何提示，jquer会显示undefined。

3. dom对象和jquery对象的相互转换

<body>

<inputid="inputID"type="button"value="这就是jQuery框架,写少代码，做多事情"/>

<divid="divID">哈哈</div>

<scripttype="text/javascript">

//取得<input>标签中的value属性的内容[dom对象->jquery对象]

// varinputElement = document.getElementById("inputID"); //这个是dom对象

// var$input = $(inputElement); //将dom对象转成jquery对象 格式：var jquery对象 = $(dom对象)

// varvalue = $input.val(); //调用jquery对象的方法

// alert(value);

//取得<div>标签中的文本内容[jquery对象->dom对象]

var $div = $("#divID");//这个是jquery对象

// vardivElement = $div[0]; //将jquery对象转成dom对象,索引有0

var divElement = $div.get(0);

var txt =divElement.innerHTML;

alert(txt);

小结：

1.dom对象和jquery对象是可以相互转换的；

2.dom对象转成jquery对象 格式：var jquery对象 = $(dom对象)；

3.jquery对象转成dom对象 格式：var dom对象 =jquery对象[0]或

jquery对象.get(0)，注意索引只有0是可用的。

</script>

</body>

4.JQuery九大选择器4.1基本选择器

通过id，标签名，样式名，多条件来获得指定元素。

Id var $div = $("#div1ID"); 相当于dom中document.getElementById(“div1ID”)

标签名 var $div = $("div "); 相当于dom中document.getElementsByTagName(("div ")

样式名 var $div = $(".className");

多条件 var $all = $("div, span, p"); var $all = $("#div1ID, .myClass,p");

将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

4.2层级选择器

<form>

<inputtype="text"value="a"/>

<table>

<tr>

<td>

</td>

</tr>

</table>

</form>

<inputtype="radio"value="c"/>

<inputtype="radio"value="d"/>

<inputtype="radio"value="e"/>

<scripttype="text/javascript">

//1)找到表单form下所有的input元素的个数

// var$input = $("form input"); //格式$(祖先后代) 祖先元素下匹配所有的后代元素

// varsize = $input.size();

// alert(size);

//2)找到表单form下所有的直接子级input元素个数

// var$input = $("form > input"); //格式：$(父元素 >直接子元素)

// varsize = $input.size();

// alert(size);

//3)找到表单form同级第一个input元素的value属性值

// var$input = $("form + input"); //格式：$(父元素 +紧接着父元素的子元素)

// varsize = $input.size();

// alert(size);

//4)找到所有与表单form同级的input元素个数

var $input = $("form ~input");//格式：$(父元素 ~和父元素同辈的子元素)

var size =$input.size();

alert(size);

小结：

1.$(父元素子元素）祖先元素下匹配所有的后代元素

2.$(父元素 > 直接子元素)

3.$(父元素 + 紧接着父元素的子元素)

4.$(父元素 ~ 和父元素同辈的子元素)

</script>

</body>

4.3基本选择器

<body>

<ul>

</ul>

<inputtype="checkbox"checked/>

<inputtype="checkbox"/>

<tableborder="1">

</table>

<scripttype="text/javascript">

//1)查找UL中第一个元素的内容

// alert($("ulli:first").html());

//2)查找UL中最后个元素的内容

// alert($("ulli:last").html());

//3)查找所有未选中的input元素个数

// alert($("input:not(:checked)").size());

//4)查找表格的1、3、5...奇数行个数下标从0开始

// alert($("tabletr:odd").size());

//5)查找表格的2、4、6...偶数行个数下标从0开始

// alert($("tabletr:even").size());

//6)查找表格中第二行的内容，从索引号0开始

// alert($("tabletr:eq(1)").html());

//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大

// alert($("tabletr:gt(0)").size());

//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小

// alert($("tabletr:lt(2)").size());

//9)给页面内所有标题<h1><h2><h3>加上红色字体

$(":header").css("color","red");

</script>

</body>

4.4内容选择器

<scripttype="text/javascript"src="../js/jquery-1.6.js"></script>

<styletype="text/css">

.myClass{

font-size:44px;

color:blue

}

</style>

</head>

<body>

<div><p>John Resig</p></div>

<div><p>George Martin</p></div>

<div>Malcom JohnSinclair</div>

<p></p>

<scripttype="text/javascript">

//1)查找所有包含文本"John"的div元素的个数

// alert($("div:contains('John')").size()); //2

//2)查找所有p元素为空的元素个数

// alert($("p:empty").size());//2

//3)给所有包含p元素的div元素添加一个myClass样式

// $("div:has(p)").addClass("myClass");

//4)查找所有含有子元素或者文本的p元素个数,即p为父元素

alert($("p:parent").size());

</script>

</body>

4.5可见性选择器

<body>

<tableborder="1"align="center">

<td>Value 1</td>

</tr>

<tr>

<td>Value 2</td>

</tr>

<tr>

<td>Value 3</td>

</tr>

</table>

<scripttype="text/javascript">

//1)查找隐藏的tr元素的个数

// alert($("tr:hidden").size());//1

//2)查找所有可见的tr元素的个数

// alert($("tr:visible").size());//2

alert($("tr:not(:hidden)").size());//取反

</script>

</body>

4.6属性选择器

<body>

<div>

<p>Hello!</p>

</div>

<divid="test2"></div>

<inputtype="checkbox"name="newsletter"value="Hot Fuzz"/>

<inputid="myID"type="checkbox"name="newsletter"value="Cold Fusion"/>

<inputtype="checkbox"name="newsaccept"value="Evil Plans"/>

<scripttype="text/javascript">

//1)查找所有含有id属性的div元素个数

// alert($("div[id]").size());//1

//2)查找所有name属性是newsletter的input元素，并将其选中

// alert($("input[name='newsletter']").size());//2

//3)查找所有name属性不是newsletter的input元素，并将其选中

// $("input[name!= 'newsletter']").attr("checked", true);

//4)查找所有name以'news'开始的input元素，并将其选中

// $("input[name^= 'news']").attr("checked", true);

//5)查找所有name 以'letter'结尾的input元素，并将其选中

// $("input[name$= 'letter']").attr("checked", true);

//6)查找所有name包含'news'的input元素，并将其选中

// $("input[name*= 'news']").attr("checked", true);

//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的，并将其选中

$("input[id][name$= 'letter']").attr("checked",true);//条件可以并列

</script>

</body>

4.7子元素选择器

<body>

<ul>

<li>Brandon</li>

</ul>

<ul>

<li>Ralph</li>

</ul>

<ul>

</ul>

<scripttype="text/javascript">

//1)迭代每个ul中第1个li元素中的内容,索引从1开始

// $("li:first-child").each(function(){ //对比：first first-child取出的是每一组中的li，first取出的是第一个li

// alert($(this).html()); //$(this)用于将dom对象转成jquery对象

// });

//2)迭代每个ul中最后1个li元素中的内容,索引从1开始

// $("li:last-child").each(function(){ X

// alert($(this).html()); //$(this)用于将dom对象转成jquery对象

// });

//3)在ul中查找是唯一子元素的li元素的内容

$("li:only-child").each(function() {

alert($(this).html()); //$(this)用于将dom对象转成jquery对象

});

</script>

</body>

4.8表单选择器

<body>

<form>

<select><option>Option</option></select><br/>

<button>Button</button><br/>

</form>

<scripttype="text/javascript">

//1)查找所有input元素的个数

// alert($(":input").size()); //对比$("input") 这个只能获取到标签名为input的所有元素；$(":input")匹配所有 input, textarea,select 和 button 元素.

//2)查找所有文本框的个数

// alert($(":text").size());

//3)查找所有密码框的个数

alert($(":password").size());

//4)查找所有单选按钮的个数

alert($(":radio").size());

//5)查找所有复选框的个数

alert($(":checked").size());

//6)查找所有提交按钮的个数

alert($(":submit").size());

//7)匹配所有图像域的个数

alert($(":image").size());

//8)查找所有重置按钮的个数

alert($(":reset").size());

//9)查找所有普通按钮的个数

alert($(":button").size());

//10)查找所有文件域的个数

alert($(":file").size());

//11)查找所有input元素为隐藏域的个数

alert($("input:hidden").size());

</script>

</body>

4.9表单对象属性选择器

<body>

<form>

<option value="1">Flowers</option>

<option value="2"selected="selected">Gardens</option>

<option value="3">Trees</option>

</select>

</form>

<scripttype="text/javascript">

//1)查找所有可用的input元素的个数

// alert($("input:enabled").size());

//2)查找所有不可用的input元素的个数

// alert($("input:disabled").size());

// alert($("input:not(:enabled)").size());

//3)查找所有选中的复选框元素的个数

// alert($("input:checked").size());

//4)查找所有未选中的复选框元素的个数

// alert($(":checkbox:not(:checked)").size());

//5)查找所有选中的选项元素的个数

alert($("selectoption:selected").html());

</script>

</body>

JQuery学习札记(1)

热点推荐