JQuery 选择器

忆往昔

灯红酒绿的城市匆忙的行人来往的车辆谁又懂谁的孤独？

第一章 JQuery 选择器

本章内容

JQuery简介
JQuery选择器
常用函数
文档加载事件
jQeury和dom的转换
each()方法的使用

第一节 JQuery 简介

jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。JQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。JQuery就是JavaScript的数组包装，JQuery使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详尽，同时还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html的内容分离，也就是说，不需要再在 html里面插入一堆js来调用命令了，只需要定义id即可。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

2006年1月，jQuery第一个版本发布，它以简洁、灵活的编程风格让人一见倾心。

jQuery发展至今，更新了十几个新版本。

1、不能向后兼容。每一个新版本不能兼容早期的版本。

2、插件兼容性不是太好，与上一点类似。

3、在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。

4、在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

第二节 JQuery文档加载事件

第一种 document ready 函数中：

$(document).ready(function(){ 
    // 开始写 jQuery 代码... 
});

第二种简洁写法（与以上写法效果相同）:

$(function(){ 
    // 开始写 jQuery 代码... 
});

第三节 JQuery基本选择器和常用函数

1.基本选择器

2.常用函数

<!DOCTYPE html>
  <title> my page </title>
  <style type="text/css">
    background-color:green;
  .hong
    border:2px solid red;
    color:red;
    font-size:30px;
  </style>
  <!--引入jq文件-->
  <script type="text/javascript" src="jq/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    function test()
        //使用类选择器获取元素
        //var content = $(".d1").html();
        //alert(content);
        //size():返回获取元素的个数
        //alert($(".d1,.p1,p").size());
        //each():用于遍历元素数组
        //index:元素的索引，从0开始
        //el:传入的js对象(不是jq对象)
        /*$(".d1,.p1,p").each(function(index,el){
            alert(index+" "+el.innerHTML);
        //标签选择器
        $("div").each(function(){
            //使用this(js对象)访问当前传入的对象
            //alert(this.innerHTML);
            //$(this):将js对象转为jq对象
            //alert($(this).html());
            //修改元素样式
            //css("属性","属性值")
            //$(this).css("border","1px solid red");
            //css({"属性1":"属性值","属性2":"属性值"})
            /*$(this).css({
                color:"red",
                border:"1px solid blue"
            });*/
            //addClass():对元素添加类样式
            $(this).addClass("hong");
    function test2()
        //移除类样式hong
        $("#div1").removeClass("hong");
  </script>
 </head>
  <div class="d1" id="div1">这是内容1</div>
  <div class="d1">这是内容2</div>
  <div>这是内容3</div>
  <p class="p1">这是段落1</p>
  <p class="p1">这是段落2</p>
  <p>这是段落3</p>
  姓名:<input type="text" name="xm" id="xm"/>
  电话:<input type="text" name="phone" id="phone"/>
  <input type="button" value="测试" onclick="test()"/>
  <input type="button" value="移除样式" onclick="test2()"/>
 </body>
</html>

3.示例

表单校验

<!DOCTYPE html>
  <title> my page </title>
  <style type="text/css">
        border:1px solid black;
        padding:10px;
        width:400px;
        margin:0px auto;
    input[type="button"]
        margin-left:50px;
  </style>
  <script type="text/javascript"
          src="jquery-1.12.4.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function(){
        $("#btn").click(function(){
            $("input").each(function(){
                //alert(this.type+" "+this.id);
                if(this.type!="button")
                    if($(this).val()=="")
                        alert("所有内容不能为空");
                        this.focus();
                        return false;
  </script>
 </head>
        <input type="text" name="account" id="account" />
        <input type="password" name="pwd" id="pwd"/>
        <input type="text" name="phone" id="phone"/>
        <input type="button" value="注册" id="btn"/> 
  </form>
 </body>
</html>

样式设置

<!DOCTYPE html>
  <title> my page </title>
  <style type="text/css">
        border-bottom:3px solid orange;
        padding-left:30px;
    #bar a
        display:inline-block;
        width:80px;
        height:30px;
        text-align:center;
        line-height:30px;
        text-decoration:none;
    #bar a.on
        color:white;
        background-color:orange;
        border-radius:5px 5px 0px 0px;
  </style>
  <script type="text/javascript"
          src="jquery-1.12.4.js">
  </script>
  <script type="text/javascript">
    $(function(){
        $("a").click(function(){
            $("a").removeClass("on");
            $(this).addClass("on");
  </script>
 </head>
  <div id="bar">
    <a href="#" class="on">天猫</a>
    <a href="#">淘宝</a>
    <a href="#">店铺</a>
 </body>
</html>

第四节 JQuery对象和dom对象的转换

//获取jQ对象
var jq = $("选择器");
//将jQ对象转为js对象
//var jsObj = jq[0];
var jsObj = jq.get(0);
//获取js对象
var jsdx = document.getElementById("id名");
//将js对象转为jq对象
var jqObj = $(jsdx);

<!DOCTYPE html>
  <title> my page </title>
  <style type="text/css">
  </style>
  <!--引入jq文件-->
  <script type="text/javascript" src="jq/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    //2.测试$
    //alert($);
    function test1()
        //使用id选择获取元素
        //$("#title").html("这是标题");
        //原生js获取元素的方式
        //document.getElementById("title").innerHTML="这是标题";
        //var jsH3 = document.getElementById("title");
        //将js对象转为jq对象
        //var jqH3 = $(jsH3);
        //jqH3.html("设置标题");
        //console.log(jqH3);
        //console.log("js对象:")
        //console.log(jsH3);
        //alert(jsH3);
        var jqH3 = $("#title");
        //将jq对象转为js对象
        var jsH3 =jqH3.get(0); //jqH3[0];
        jsH3.innerHTML="设置标题";
        console.log(jsH3);
        //console.log("jq对象:")
        //console.log(jqH3);
        //alert(jqH3);
    function test2()
        //原生js方式，获取元素内容
        //var content = document.getElementById("title").innerHTML;
        //alert(content);
        //用jq方式获取元素内容
        var content = $("#title").html();
        alert(content);
  </script>
 </head>
  <h3 id="title"></h3>
  <input type="button" value="设置内容" onclick="test1()"/>
  <input type="button" value="获取内容" onclick="test2()"/>
 </body>
</html>

第五节其他选择器

第六节 json对象

json对象:是指javascript简单对象,用于在不同系统中传输数据。是承载数据的一种方式。

数据类型:整数 100,小数 2.34,字符串 "abc",布尔值 true/false,对象值 new Date()

如果要表示一个学生信息: 因为学生包含多方面的数据，所以使用上面这些单一类型数据无法很好的表示。所以我们可以使用json对象来表示。

语法:

//用大括号，封装多个键值对表示json对象数据
{"属性1":值1,"属性2":值2}
{属性1:值1,属性2:值2}
属性:字母数字下划线 , name表示姓名,age 年龄
值: 数值,字符串,对象,数组,函数,其他json对象
<script type="text/javascript">
    //定义json类型的数据并存储到stu变量中
    //var stu = {name:"张三",age:20,tall:1.7};
    var stu = {
               "name":"张三",
               "age":20,
               "tall":1.7,
               "show":function(){
                    alert(this.name+" "+this.age+" "+this.tall);
    //alert(stu);
    //console.log(stu);
    //stu.show();
    //alert(stu.name+" "+stu.age+" "+stu.tall);
    //alert(stu["name"]+" "+stu["age"]+" "+stu["tall"]);
    //遍历json对象
    /*for(var p in stu)
        alert(p+" "+stu[p]);
 </script>
<script type="text/javascript">
    //json对象
    var stu = {name:"张三",age:20,tall:1.7};
    //alert(stu);
    //将json对象转为json字符串
    //var strStu1 = JSON.stringify(stu);
    //alert(strStu1+" "+typeof(strStu1));
    //alert(stu.name);
    //json对象字符串:属性一定要加双引号
    var strStu = '{"name":"张三","age":20,"tall":1.7}';
    //alert(strStu+" "+typeof(strStu));
    //alert(strStu);
    //将json字符串转为json对象
    //var jsonStu = JSON.parse(strStu);
    //alert(jsonStu.name+" "+jsonStu.age+" "+jsonStu.tall);
 </script>
<script type="text/javascript">
    var stu={name:"张三",sex:["男"],age:20,tall:1.7};
    $(function(){
        //绑定按钮单击事件
        $("#btn").click(function(){
            //遍历学生对象
            for(var p in stu)
                //p:学生对象中的属性
                //alert(p+" "+stu[p]);
                //使用属性拼成表单选择器,设置表单元素数据
                alert("input[name='"+p+"']");