javaweb第四天 jQuery

一，JS的补充

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

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

    -----请选择-----
    上海市
    北京市
    广州市



    -----请选择-----

3，HTML在浏览器中的加载
html在浏览器内存里都加载成一个DOM 树 包含三个重要的节点。
1.标签节点。
2.文本节点(空格也是文本) 。
3.属性节点。

4，HTML注意事项
①一个html 只能存在一个跟标签,根标签没有父元素。
②标签可以存在兄弟元素，以及父元素。

二，jQuery的语法及基本操作

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

二，jQuery引入

    "UTF-8">
    
    

一般在头部引入。

三，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下所选中的值