学习jQuery第一天总结（一）、each（function）循环函数、jQuery与DOM相互转换、判断是jq还是dom，data函数

一、JQuery核心基础

jquery的核心是函数，简写$();

示例：

使用jQuery查找所有元素，并且显示出来

    <div>
        <p id="p_1">迟日江山丽</p>
        <p>春风花草香</p>
        <p>泥融飞燕子</p>
        <p>沙暖睡鸳鸯</p>
    </div>
<script>
   var $divCount  =jQuery('div'.text());
   alert($divCount);
</script>

在查找div内容的时候，使用text（）能够找出所有元素

 1.2 jQuery（HTML，[props],[ownerDocument]）

实例：向form元素中插入input标签

    <form action=""></form>
    <script>
        var prop = {
            "style": "color:red;font-size:20px",
            "value": "请在空格内输入相应的内容"
        }
        var test = $("<input />", prop)
        $('form').html(test)
    </script>

1.3 each（callbackFun）循环函数

callbackFun将会接收值类型标识当前被迭代元素的标识；函数在默认情况下会迭代数组中的所有元素，当元素返回false的时候，停止调用

参数说明：

函数接收一个数值作为参数

实例：使用each将form内容中input标签的内容加入到下方p标签

 <form action="">
        <input type="text" value="蒹葭苍苍"><br>
        <input type="text" value="在水一方"><br>
        <input type="text" value="所谓伊人"><br>
    </form>
    <h2>这是一首诗</h2>
    <p style="color: red;font-size: 20px;"></p>
    <p style="color: black;font-size: 20px;"></p>
    <p style="color: pink;font-size: 20px;"></p>
    <script>
        var $te = ('input', document.forms[0])
        $('p').each(function(i) {
            this.innerHTML = $te[i].value
        })
    </script>

结果：

 1.4 jQuery对象和DOM对象的相互转换

jq转换为DOM对象：

方式一、

$('input').get(0);

方式二、

$('p')[0]

DOM对象转换为jQuery对象

var a =document.getElementById("name")

alert("$(text)".val());

如何判断到底是JQuery还是DOM对象呢？

使用方法：

 targetObj instanceof $   如果结果为true，则是jQuery，反之则不是

targetObj instanceof Element  结果如果是true，是DOM。反之则不是

实例：

jQuery与DOIM之间的互相转换

    <input type="text" id="username" value="这是一个文本框">
    <script>
        //首先使用js调用
        var first = document.getElementById("username")
        alert(first.value)
            //转换为Jquery方法
        var $second = $(first)
        alert($second.val())
            //再次将其转换为js
        var third = $second[0]
        alert(third.value)
    </script>

   判断是jQuery还是js：

    <button onclick="checkType(this)">点击判断类型</button>
    <input type="text" id="username" value="这是一个文本框">
    <script>
        function checkType(obj) {
            if (this instanceof jQuery) {
                $('input').val(obj.text())
            } else {
                alert("这不是一个jQuery对象")
                $('input').val($(obj.text()))
            }
        }
    </script>

1.5   jQuery其他的函数及其属性

size()   返回元素个数函数

此函数可以获取某个元素的个数

用法： $('元素').size

$('input').size()   //获取有多少个input

length属性：

用于获取并返回某个元素的个数

用法示例：

$('元素').length

$('p').length  //获取有多少个p元素

context属性

get（index)函数：

get函数用来获取DOM对象，他有转化功能，参数是一个获取jq对象的索引

用法：

      $('元素').get(0)     或者     $('元素')[0]

示例：

    

$('input').get(0)   //获取input对象
//$('input')[0]    第二种用法

index([selector |element])函数：

index函数用来在当前调用此函数的元素内查找目标对象的索引，如果未找到结果则返回-1

selector：一个即将被查找的jQuery选择器对象

element：一个可以是dom也可以是jQuery选择器对象

示例：

    <p id="p_1">迟日江山丽</p>
    <p>春风花草香</p>
    <p class="ii">泥融飞燕子</p>
    <p>沙暖睡鸳鸯</p>
    <script>
        var $allArr = $('p')
        var a = $allArr.index($('.ii'))
        if (a === -1) {
            alert("没有找到")
        } else {
            alert("找到了" + a)
        }
    </script>

data（[key],[value])函数：

参数：

key：标识对象的唯一名称，通常应指定

value：标识存储的对象

removeData（[name|list])函数:

和data函数相对应，从某个函数中移除已存储的数据

参数：   name：数据的key值，如果未指定则清除所有数据

示例:使用data与removedata函数在删除、显示、添加值

    <div></div>
    <button onclick="addData()">添加</button>
    <button onclick="showData()">显示</button>
    <button onclick="deleteData()">删除</button>
    <script>
        var names = [
            "两个黄鹂鸣翠柳",
            "一行白鹭上青天",
            "窗含西岭千秋雪",
            "门泊东吴万里船"
        ]

        function addData() {
            $('div').data('names', names)
        }

        function showData() {
            $($('div').data('names')).each(function() {
                alert(this)
            })
        }

        function deleteData() {
            $('div').removeData('names')
        }
    </script>