javaweb第四天 jQuery

最新推荐文章于 2023-10-09 11:32:39 发布

TTtoString

最新推荐文章于 2023-10-09 11:32:39 发布

阅读量104

点赞数

分类专栏： javaweb 文章标签：入门自学基础

本文链接：https://blog.csdn.net/weixin_45599323/article/details/103449270

版权

javaweb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一，JS的补充

1，js中的事件:
①onclick 点击事件
②onblur 失去焦点
③onfoucus 获取焦点
④onload html加载完成的时候
⑤onsubmit 提交
⑥onchange 当输入框发生改变的时候
⑦onmouseover 移动到某一个元素的时候触发
⑧onmouseout 移除某一个元素的时候 (前提是在移入的状态下)

2，this.value 获取当前select标签中选择的内容
市级联动代码展示。

<body>
<select οnchange="show(this.value)">
    <option>-----请选择-----</option>
    <option value="0">上海市</option>
    <option value="1">北京市</option>
    <option value="2">广州市</option>
</select>

<select id="p">
    <option>-----请选择-----</option>

</select>

<script>
    function show(index) {
        var arr = new Array(3);
        arr[0] = ["黄浦区","红灯区","十一区"];
        arr[1] = ["房山区","海淀区","朝阳区"];
        arr[2] = ["白云区","南沙区","天河区"];
        var str = "";
        for(var i = 0; i < arr[index].length; i++){
            str+="<option>"+arr[index][i]+"</option>";
        }
        document.getElementById("p").innerHTML = str;
    }
</script>
</body>

3，HTML在浏览器中的加载
html在浏览器内存里都加载成一个DOM 树包含三个重要的节点。
1.标签节点。
2.文本节点(空格也是文本) 。
3.属性节点。
在这里插入图片描述
4，HTML注意事项
①一个html 只能存在一个跟标签,根标签没有父元素。
②标签可以存在兄弟元素，以及父元素。

二，jQuery的语法及基本操作

一，jQuery简介
jQuery是一个简介的js框架，其实就是对js的代码的底层的封装，提倡以更少的代码做更多的事情，做了很多css的适配，提供了一个更为简洁的JS设计模式。

二，jQuery引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.js"></script>
</head>

一般在头部引入。

三，jQuery基本语法以及准备函数

1，在jQuery中，jQuery = $ ，但是 jQuery严格区分大小写。

2，获取的jQuery对象变量名称建议以$开头。

3，准备函数的两种表达方式
①

 $(document).ready(function () {
       
    });

②

 $(function () {
      
    });

四，jQuery获取节点的三种方式及对象的转换

1，标签选择器 $(" "); 类选择器$ (". “);id选择器$(”# ");
2，JQ对象与JS（DOM）对象的转换
① JS转JQ： jQuery（DOM对象）。
② JQ转JS： jQuery对象【index】；

五，jQuery的常用方法及事件
1，常用方法
.val() 获input标签象的value值
.html() 获取标签的Value值
.text() 获取TEXT 文本，会忽略标签

2 jquery 的事件与js 的区别
①.没有前缀on
②.对同一一个节点给事件，可以连着写
③.主要在html中命名不适用.

六，提供的常规方法
出现，隐藏，（出现/隐藏）
1，show(),hide().toggle() 效果：无
2, slideDown(),slideUp,slidetoggle() 效果：下拉上拉
3, fadeIn(),fadeOut(),fatetoggle() 效果：淡化

七， jquery的选择器

1，层次选择器
①，A B =>$ (A B) ==>获取A 标签下所有的元素(包含孙子元素)
②，A>B =>$ (A.B) =>获取A标签所有的元素（不包含孙子元素）
③，A+B =>$ (A+B)=>获取A标签的兄弟元素(紧挨着的第一个兄弟元素)
④，A~B =>$ (A~B)=>获取A标签下所有的兄弟元素

2，过滤选择器
①，$ (“div:even”) 表示所有偶数项的div 注意点:索引是从0 开始的
②，$ (“div:odd”); 表示所有奇数项的div 注意点:索引是从0 开始的
③，$ (“div:eq(4)”) 获取到索引为4 的div元素
④，$ (“div:gt(4)”); 获取到索引大于的div元素
⑤，$ (“div:lt(4)”) 获取小于4 的div元素
⑥，$(“div:not(div:odd)”) 表示取相反的结果

3，针对input标签的属性选择器
①，$ ("[type]"); 获取存在属性type所有的节点
②，$ ("[type=text]"); 获取所有属性type=text的节点对象
③，$ ("[type*=o]") 获取type 的值中包含o的节点对象
④，$ (“input[type=radio][id=tv_select]”) 同时满足 type=radio id=tv_select 的input标签
⑤，$ (“input:disabled”); 获取input 标签禁用的value值
⑥，$ (“input:checked”); 获取到单选或者复选框选中的节点
⑦，$("#tv_main>option:selected"); 获取当前select下所选中的值