一 jQuery是什么?

[1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

[2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

[3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

[4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

[5]  jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

二 什么是jQuery对象?

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是是jQuery独有.如果一个对象是jQuery对象,那么它就可以用jQuery里的方法: $("#test").html();

$("test").html()
    意思是指:获取ID为 test的元素内的html代码。其中html()是jQuery里的方法
    这段代码等同于用DOM实现代码:  document.getElementById("test").innerHTML;
    虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的方法,卵用会报错
    约定:如果获取的是jQuery对象,那么在变量前面加上$

var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]:  jQuery对象转为dom对象
$("#msg").html();
$("msg ")[0].innerHTML

jQuery的基础语法 $(selector).action()

http://jquery.cuishifeng.cn/   <----------参考来自

3.1   选择器

3.1.1 基本选择器     

$("*")    $("#id") $(".class") $("element") $(".class,p,div")

, 3.1.2 层级选择器 

 $(".outer div") $(".outer > div") $(".outer + div") $(".outer ~ div")

3.1.3 基本筛选器 

$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

3.1.4 属性选择器

$('[][id]')

3.1.5 表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

 3.1.6 表单属性选择器

   :enabled
    :disabled
    :checked
    :selected
<body>

<form>
    <input type="checkbox" value="123" checked>
    <input type="checkbox" value="456" checked>


  <select>
      <option value="1">Flowers</option>
      <option value="2" selected="selected">Gardens</option>
      <option value="3" selected="selected">Trees</option>
      <option value="3" selected="selected">Trees</option>
  </select>
</form>


<script src="jquery.min.js"></script>
<script>
    // console.log($("input:checked").length);     // 2

    // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1

    $("input:checked").each(function(){   
    //遍历 input标签下属性有 checked,找到就执行function

        console.log($(this).val())
    })

</script>


</body>
View Code

相关文章: