jQuery学习--javaweb

jquery介绍

1. javascript和查询（Query），辅助js开发的js类库
2. 核心思想：写得更少，做得更多，实现了很多浏览器的兼容问题
3. 优点：免费、开源，jquery的语法设计可以使开发更加便捷，例如操作文档对象，选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
4. 初级体验：$是一个函数，jquery的核心函数；
   带有min的是jquery.js的压缩版本，更小一些，也能用
   （1）先查询到目标对象
   （2）再通过对象 . 事件 ( function ( ) { } )

<script type="text/javascript">
       alert($); // --->返回一个function
        $(function(){  //页面加载完成，相当于onload事件

            var myobj = $("btn");  //表示按id查询对象
            myobj.click (function(){
                alert("你点我干嘛");
            });
        });
    </script>

$–jQuery核心函数

$ 是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用这个函数

1. 传入参数为【函数】时
   表示页面加载完成之后，相当于window.onload = function(){}
2. 传入参数为【HTML 字符串】时
   会对我们创建这个html标签对象
3. 传入参数【选择器字符串】时
   $(“#id属性值”)； id选择器，根据id查询标签对象
   $(“标签名”)； 标签名选择器，根据指定的标签名查询标签对象
   $(“.class属性值”)； 类型选择器，可以根据class属性查询标签对象
4. 传入参数为【DOM对象】时，将DOM对象包装为jQuery对象返回

jQuery对象和DOM对象

1. DOM对象alert出来的效果是：[object HTML 标签名 Element]
2. jQuery对象alert出来的效果是：[object Object]
3. DOM对象的属性和方法jQuery对象不能使用
4. jQuery对象的属性和方法DOM对象也不能使用
5. DOM对象和jQuery对象相互转换
   DOM对象转化为jQuery对象
   $(DOM对象)
   jQuery对象转化为DOM对象
   jQuery对象[下标]

jQuery对象本质

是DOM对象数组+jQuery提供的一系列功能函数
DOM对象

window.onload=function()
            {
                var dmyobj=document.getElementsByTagName("button");
                alert(dmyobj); //--->[object HTMLCollection]

                for(var i=0;i<dmyobj.length;i++)
                {
                    alert(dmyobj[i]);  //---->[object HTMLButtonElement]
                }
            };

jQuery对象

$(function(){  //页面加载完成，相当于onload事件

            
            var $myobj=$("button");
            alert($myobj);  //--->[object Object]

            for(var i =0; i < $myobj.length; i++)
            {
                alert($myobj[i]);  //--->[object HTMLButtonElement]
            }
        });

jQuery选择器

得到的元素为元素在代码中从上到下的顺序
见jQuery手册(有详细说明和用法)
https://jquery.cuishifeng.cn/index.html

jQuery事件

1. 页面加载完成事件
   先执行jQuery再执行js原生事件
   触发时间：
   （1）jQuery:浏览器的内核解析完页面，所有标签创建好DOM对象之后就会马上执行
   （2）js原生：除了等浏览器的内核解析完页面，所有标签创建好DOM对象，还要等标签显示时需要的内容加载完成（图片，超链接地址等等）

jQuery的常见属性和方法

主要参考jQuery手册

1. .css() 方法可以设置和获取样式
2. val()可以操作表单项的value属性值
   它可以设置和获取值
3. each方法是jQuery对象提供来遍历元素的方法
   在遍历的function函数中，有一个this对象，这个this对象就是当前遍历到的DOM对象

var $checkboies = $(":checkbox:checked");
$checkboies.each(function(){
	alert(this.value);
});