JQuery_html-js-css_内存溢出

一.JQuery入门

二.JQuery选择器

三.设置样式

1.利用css()

2.设置类样式

3.JQuery的排他思想

4.链式编程

三.jQuery *** 作属性

四.jQuery事件对象

五.案例

1.下拉菜单

2.淘宝服饰案例

3.TAB栏切换案例

六.其他

1.原生JS中的className和jQuery的类 *** 作的区别

JQuery是JavaScript库，封装了JavaScript许多函数，JQuery主要来 *** 作DOM。

JQuery：JavaScript Query 查询JS，把JS中的DOM *** 作封装，可以快速查询使用里面的功能。

一.JQuery入门

$是JQuery的别称，在代码中可以使用JQuery代替$。$是jQuery的顶级对象
    

DOM对象和JQuery对象

DOM对象：通过原生js获得的对象
var myDiv = document.querySelector('div');
//div就是DOM对象
jQuery对象：用jQuery方式获取的对象
$('div')
//$('div')就是Jquery对象
jQuery对象本质是利用$对DOM对象包装后产生的对象，用伪数组的形式存储。

注意：jQuery对象只能用jQuery方法，DOM对象只能使用js的属性和方法

例如

myDiv要是想隐藏的话只能myDiv.style.display = 'none' 而不能用hide

$('div').style.display = 'none' 也是不允许的。

DOM对象和JQuery对象的相互转换

原生JS的范围要比JQuery的范围大，原生JS中有一些没有被JQuery封装。

DOM对象转为JQuery对象
    
JQuery对象转为DOM对象
    

JQuery入口函数
两种方式都等价于
document.addEventListener('DOMContentLoaded',function(){})
不必等到js外部文件，css文件，图片全部加载完毕再去执行

二.JQuery选择器

筛选选择器

选取父子元素

JQuery - 选择器 - 伪类选择器_梨花炖海棠的博客-CSDN博客_jquery伪类选择器

三.设置样式 1.利用css()

     
设置多组样式时，复合属性要采取驼峰命名法，比如background-color要写成backgroundColor

隐式迭代

上面四个div都改变了样式，原生js中，只有通过for循环，给每个元素设置style，才能全部改变样式。这里用到了JQuery的隐式迭代。

2.设置类样式

上面那种 *** 作添加多个样式会显得繁琐。

切换类，如果这个元素有这个类名就去掉，没有这个类名即加上。



    
    Title

3.JQuery的排他思想



    
    Title

4.链式编程

上面的排他思想中的代码，this出现了两次，可以使用链式编程让代码更简洁。

 $(function () {
           $('button').click(function () {
               $(this).css('background','pink').siblings('button').css('background','');
           })
        })

三.jQuery *** 作属性

设置或获取元素固有属性值prop()


    
    Title
    
    


aa

设置或获取元素自定义属性值attr()


    
    Title
    
    


aa

设置更改元素内容

相当于原生innerHTML

html() 获取元素的内容

html("内容") 设置元素的内容
    


    我是span

设置更改元素的文本内容

相当于原生innerText

text() 获取元素的文本内容

text("内容") 设置元素的文本内容
    


    我是span

设置更改表单的值

四.jQuery事件对象

五.jQuery方法

each方法

append方法

appendTo方法

empty

删除其子节点

remove

删除此节点

六.案例 1.下拉菜单

在DOM博客中有JS原生代码写的案例

     $(function () {
            $('.nav>li').mouseover(function (){
                $(this).children('ul').show();
            })
            $('.nav>li').mouseout(function () {
                $(this).children('ul').hide();
            })
        })

2.淘宝服饰案例

鼠标经过哪个链接，右侧就显示哪个图片



    
    Title

3.TAB栏切换案例

4.购物车




    
    Title
    
    


全选







全选

六.其他 1.原生JS中的className和jQuery的类 *** 作的区别