菜鸟学习第二十六天 JQuery深入，jQuery和DOM

本文链接：https://blog.csdn.net/qjw1314520/article/details/90116486

1.一些css选择器：
E表示元素
1）标签选择器：E{CSS规则}
2）ID选择器：#ID{CSS规则}
3）类选择器：E.className{CSS规则} 如果有E代表元素为e,类为className的元素，如果是.className(注意前面有点)，表示对所有className元素
4）群组选择器：E1,E2,E3{CSS规则}
2.JQuery选择器
1.基本选择器（basic）===

选择器	描述	返回	示例
#id （重要）	根据给定的id匹配一个元素	单个元素	$("#testid")
.class（重要）	根据给定的类名匹配元素	集合元素	$(".test")
element	根据给定的元素名匹配元素	集合元素	$(“p”)
*	匹配所有元素	集合元素	$("*")
selector1,selettor2…	将每一个选择器匹配到的元素合并后一起返回	集合元素	$(“div,span,p.myclas”) 选取所有div,span,和拥有class为myclass的p标签的一组元素（注意是p点class）

2.层次选择器（lebel）

选择器	描述	返回	示例
$(“ancestor descendant”)	选取ancestor元素里的所有descendant(后代)元素，也就是说包括子元素的子元素等	集合元素	$(“div span”) 选取div里的所有span元素
$(“parent>child”)	选取parent元素下的child（子）元素，与第一种有区别	集合元素	$(“div>span”)选取div元素下个元素名是span的子元素
$ (‘prev+next’)	选取境界在prev元素后的next元素	集合元素	$(^{'} . o n e + d i v^{'}) 选取 c l a s s 为 o n e 的下一个 d i v 元素， j u q e r y 中有个等价的方法$ (".one").next(“div”)
$(‘prev~siblings’)	选取prev元素之后的所有siblings元素	集合元素	jquery中有等价方法$("#prev").nextAll(“div”), $("#two~divs")选取id为two的元素后面的所有div兄弟元素（指的是在层次上一个级别的元素为兄弟元素

3.过滤选择器（filter）
3.1）基本过滤
在这里插入图片描述
3.2）内容过滤

3.3）可见性过滤

3.4）属性过滤

3.5）子元素过滤

3.6）表单对象属性过滤

4.表单选择器（form）

3. 有空格和没空格区别

<script>
        $(function () {
            alert($('.test :hidden').length);//有空格，表示class为test的元素的子元素是隐藏的集合或者class为test，且是隐藏的元素的子元素集合
            alert($('.test:hidden').length);//无空格，表示隐藏的class为test的元素
        });
    </script>

4.jQuery和DOM
1.HTML DOM常见操作
1）查找节点
var $ v=$ (“节点名称”);前面可以用一个$来表示这是一个jQuery对象，也可以不加
2）插入节点
在这里插入图片描述

3）删除节点
3.1调用节点对象的remove();方法，该jquery对象内容在网页上没了，但是对象还在内存中存在，所以可以对其操作，remove中参数还可以为删除指定条件比如属性选择器
3.2 empty()；清空元素内容，元素本身还在
4）复制节点
clone();返回一个克隆对象，参数true，代表克隆的对象具有克隆对象的全部事件，比如不加那么克隆出来的对象就没有愿对象的click方法
5）替换节点
replaceWith（），后替换前
replaceAll（），前替换后
6）包裹节点
wrap（）；后包裹前
wrapInner（）；前包裹后
示例1：动态创建file和button
js实现：

<script type="text/javascript">

    function add() {
        var div1 = document.getElementById("div1");
        var br=document.createElement("br");
        var input=document.createElement("input");
        var button1=document.createElement("input");
        input.setAttribute("type","file");
        button1.setAttribute("type","button");
        button1.setAttribute("value","remove");
        button1.onclick=function()
        {
            div1.removeChild(br);
            div1.removeChild(input);
            div1.removeChild(button1);

        };
        div1.appendChild(br);
        div1.appendChild(input);
        div1.appendChild(button1);

    }

</script>
<body>
<input type="file" id="file">
<input type="button" value="more" id="button1" onclick="add();">
<div id="div1"></div>
</body>

jquery实现：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        var count=0;
        $(document).ready(function () {
            $("#button1").click(function () {
                var input=$("<input type='file'>");
                var button=$("<input type='button' value='remove"+(++count)+"'><br>");
                $("#div1").append(input).append(button);
                button.click(function () {
                    input.remove();
                    button.remove();
                });

            });

        });
    </script>

5.属性操作
1）attr（）；获取与设置属性多个属性attr({“属性名一”：“属性名一”，“属性名二”：“属性值二”})，以对象形式来设置
2）removeAttr（）；移除元素属性
3）addClass（）；removeClass（）；添加一个class属性，和移除一个classs属性
4）toggleClass（）；对class进行开关，有这个class我们就移除，没有我们就添加，两种状态切换
5）hanClass（）；判断是否具有参数class
6）is（选择器）；是否是某个选择器，还可以判断是否被选中，是不是处于某种状态之中等
7）html（）；和text（）；有参数代表设置值，html会显示全部合法html元素，text只会显示text，且text设置html语言，不会被执行，会将html元素以文本形式设置。
8）val（）；获取值或者设置值，也就是元素的value
9）children（）；下一层子元素个数
10）next（）；下一个元素及子元素的集合
11）prev（）；上一个元素集合
12）siblings（）；上下所有兄弟元素
13）show（）；参数可以指定时间，或者快慢fast之类的
14）hide（）；参数可以指定时间，或者快慢fast之类的

6.addClass（）和attr（）区别

在这里插入图片描述
7.jQuery的Event事件处理
1）浏览器事件的冒泡机制，内层元素调用事件会触发外层事件，当里层事件触发，产生一个Event对象，事件冒泡往外走，因为单击了调用了内层元素事件，而内存元素存在于外层元素之中，也相当于触发了外层元素相同的事件，所以我们应该阻止事件被意外处理。方法：在jQuery调用元素对象的bind（）方法，bind方法可以接收3个参数，通常2个，第一个事件名称，第二个参数一个可选参数（可以省略），第三个真正的事件处理器function(event)接受一个event参数，然后函数内调用event.stopPropagation();停止事件的冒泡（Propagation：传播），event是浏览器产生的。还有一种是event.preventDefault（）；阻止默认行为（比如表单提交）
2）window.onload（）执行时机是在页面的所有结构，包括要显示的图片文件之类的发送请求下载完后然后才执行，而ready在页面结构加载完毕就执行，比onload快的多
3）事件名称：
mouseout鼠标离开
mouseover鼠标在上面
hover（）接受两个参数，一个是鼠标在上面，一个是鼠标移开替代了mouseout和mouseover
toggle（）接受两个参数一个是显示，一个是隐藏，如果一个toggle两个参数都是toggle（），那么也是可以实现一个显示一个隐藏
4）对click，return false;比如a标签的click事件return false，那么就不让它跳转到链接地址，用1的event.stopPropagation();方法还是会跳转，用event.preventDefault（）；可以阻止跳转
5）unbind（）取消所有绑定事件，参数可以是事件名，那么就是取消指定的绑定事件
6）trigger（）模拟事件，参数是事件名，模拟用户操作，如果事件名是click,那么就相当模拟了用户单击事件
8.动画
1）slideUp（）slideDown,伸缩和展开
2）animate（）动画，参数是一些css
9.示例，使用jquery来进行异步操作

 <script type="text/javascript">
        $(function () {
            $("#button1").click(function () {
                $.ajax({//表示调用jquery给我们提供的ajax方法，表示以异步的方式来进行数据传输

                    type:"POST",
                    url:"AjaxServlet1",
                    dateType:"html",//xml,json,html,默认是html
                    //date:数据
                    success:function (returnedData) {
                        $("#result").val(returnedData);
                    }

                });

            });
        });


    </script>