1.①jq传参②函数调③对象调each,trim,type,判断类型④属性方法each,index,size,eq,attr,prop,removeAttr,加class,读文本⑥选择器>gt;<lt

目录

一:jQuery:一个优秀的JS函数库

下载 此链接

二:jQuery对象和DOM对象的区别与联系

1.DOM对象:用原生js获取过来的对象是DOM对象

2.jQuery对象:将dom元素对象以伪数组形式存储(可能只有一个元素)(用jQuery方式获取过来的对象是jQuery对象) 

3.jQuery对象只能使用jQuery方法  ; DOM对象则只能使用原生的JavaScript的属性和方法

三:DOM对象和jQuery对象相互转换

四:JQ的$符号是什么

1.$是JQ的别称 $=jQuery

2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法

五.JQ作为函数调用

四种传参形式:①函数 ②DOM对象③#id .class③标签名

六.JQ作为对象使用的工具方法 $.方法名:

①有$.each(数组名 或 对象名,function(){})遍历数组或对象的数据注意此处是$直接调用的

如果遍历对象 就是 属性名称  属性值 如果遍历数组  就是索引 元素值

②$.trim(字符串名)  去除字符串两边的空格

③$.type(名字)  得到数据的类型

⑥$.isArray(obj): 判断是否是数组

⑦$.isFunction(obj): 判断是否是函数

⑧$.parseJSON(json) : 解析json字符串转换为js对象/数组

七.方法属性方法      $.变量名.方法     $btns.each(function(){})方法 注意和上面的不同 这是$().each()

① $btns.each(function(){})   遍历

② .index() 返回索引  总元素个数是同级元素的所有兄弟个数

 ③.size()方法:引入老版本的jQuery的js文件有,新版本的没有  一般计算长度还是用length

④.eq(索引值)   以JQ的方式获取第二个按钮

⑤操作任意属性     attr  removeAttr    prop

   attr('属性名','属性值')   :   无法添加布尔值 单参数是读,双参数是写 读取属性添加属性

   removeAttr('属性名')    移除某个属性

   prop('要添加的属性名',true或者false)    添加布尔值

⑥操作class属性

   addClass('class值')

   removeClass()

 ⑦操作HTML代码/文本/值

   .html() 读方法:返回标签内文本   

   .html('要添加的文本') 写方法

  ​

  .val()读方法:返回value值

  .val('要修改成什么写什么')写方法:修改value值

八:选择器

1.基本选择器

2.层级选择器

①选中ul下所有的的span

②选中ul下所有的子元素span

③选中class为box的下一个li

④选中ul下的class为box的元素后面的所有兄弟元素

3.过滤选择器

①选择第一个div

②选择最后一个class为box的元素

③选择所有class属性不为box的div

④选择第二个和第三个li元素

 还可以用大于0 小于3来做 (就是要索引为1和2的li元素)

:lt   小于给定索引值      :gt  大于给定索引值     这两个选择器都不包含边界

⑤ 选择内容带BBBBB的li

⑥可见性选择器:选择隐藏的li   

⑦选择有title属性的li元素           $('li[title]').css('background','pink');

⑧ 选择所有属性title为hello的li元素

⑨选择所有有title属性 且title属性不为hello的li元素

4.表单选择器   $('外层标签名 内层标签名:属性值') 或者 $(':表单类型值:表单属性值')    可以直接用单层标签名:表单属性写


一:jQuery:一个优秀的JS函数库

下载 此链接

复制全部代码,然后打开编辑器创建一个js文件粘贴进去。

二:jQuery对象和DOM对象的区别与联系

html代码:

1.DOM对象:用原生js获取过来的对象是DOM对象

2.jQuery对象:将dom元素对象以伪数组形式存储(可能只有一个元素)(用jQuery方式获取过来的对象是jQuery对象) 

 

这是一个DOM对象 

3.jQuery对象只能使用jQuery方法  ; DOM对象则只能使用原生的JavaScript的属性和方法

 三:DOM对象和jQuery对象相互转换

 1.jQuery对象转DOM对象:其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。

 2.DOM对象转jQuery对象

四:JQ的$符号是什么

1.$是JQ的别称 $=jQuery

是相同的 

2.$是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法

五.JQ作为函数调用

四种传参形式:①函数 ②DOM对象(this默认指向DOM对象)③#id .class③标签名

六.JQ作为对象使用的工具方法 $.方法名:

①有$.each(数组名 或 对象名,function(){})遍历数组或对象的数据注意此处是$直接调用的

  • 如果遍历对象 就是 属性名称  属性值 如果遍历数组  就是索引 元素值

②$.trim(字符串名)  去除字符串两边的空格

③$.type(名字)  得到数据的类型

⑥$.isArray(obj): 判断是否是数组

⑦$.isFunction(obj): 判断是否是函数

⑧$.parseJSON(json) : 解析json字符串转换为js对象/数组

 

七.方法属性方法      $.变量名.方法     $btns.each(function(){})方法 注意和上面的不同 这是$().each()

    <p>哈哈哈我是按钮3的兄弟元素</p>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
<script>
        $(function () {
            // 通常我们通过jquery获取的元素集合 我们称为jquery对象  在变量命名的时候,都会在最前面添加一个$  
            // 如下$btns  写和不写都可以,但是为了区分DOM对象和jQuery对象我们要写
            var $btns = $('button');
 })
</script>

① $btns.each(function(){})   遍历

② .index() 返回索引  总元素个数是同级元素的所有兄弟个数

 

 ③.size()方法:引入老版本的jQuery的js文件有,新版本的没有  一般计算长度还是用length

④.eq(索引值)   以JQ的方式获取第二个按钮

⑤操作任意属性     attr  removeAttr    prop

  •    attr('属性名','属性值')   :   无法添加布尔值 单参数是读,双参数是写 读取属性添加属性

  •    removeAttr('属性名')    移除某个属性

  •    prop('要添加的属性名',true或者false)    添加布尔值

⑥操作class属性

  •    addClass('class值')

  •    removeClass()

 ⑦操作HTML代码/文本/值

  •    .html() 读方法:返回标签内文本   

  •    .html('要添加的文本') 写方法

  

  •   .val()读方法:返回value值

  •   .val('要修改成什么写什么')写方法:修改value值

八:选择器

1.基本选择器

2.层级选择器

①选中ul下所有的的span

        $('ul span').css('background', 'pink');

②选中ul下所有的子元素span

        $('ul>span').css('background', 'pink')

③选中class为box的下一个li

        $('.box + li').css('background', 'pink')                    //BBBBB那个

④选中ul下的class为box的元素后面的所有兄弟元素

        $('.box ~ li').css('background', 'pink');                  //BBBBB DDDD EEEEE 这三个兄弟

3.过滤选择器

①选择第一个div

           $('div:first').css('background','pink')

②选择最后一个class为box的元素

           $('.box:last').css('background','pink');

③选择所有class属性不为box的div

           $('div:not(.box)').css('background','pink');

④选择第二个和第三个li元素

           eq  是按照索引来查找元素的 从零开始

           $('li:eq(1)').css('background','pink');

           $('li:eq(2)').css('background','pink');

           $('li:eq(1),li:eq(2)').css('background','pink')

 还可以用大于0 小于3来做 (就是要索引为1和2的li元素)

:lt   小于给定索引值      :gt  大于给定索引值     这两个选择器都不包含边界

$('li:gt(0):lt(3)').css('background','pink'); 但是这样写会出现问题,会把索引为1,2,3的元素一起选出来,原因如下图:gt先开始执行的话,执行完毕后li会重新赋值,索引为1的变成了0;2变1;3变2...  再执行lt小于3 ,此时取到的多一个

 解决办法:从0取到2    或者  先从后截取再从前截取

$('li:gt(0):lt(2)').css('background','pink');

$('li:lt(3):gt(0)').css('background','pink');

⑤ 选择内容带BBBBB的li

           $('li:contains(BBBBB)').css('background','pink');

⑥可见性选择器:选择隐藏的li   

           $('li:hidden').show(1000);

⑦选择有title属性的li元素
           $('li[title]').css('background','pink');

⑧ 选择所有属性title为hello的li元素

           $('li[title=hello]').css('background','pink');

⑨选择所有有title属性 且title属性不为hello的li元素

           $('li[title][title!=hello]').css('background', 'pink');

4.表单选择器   $('外层标签名 内层标签名:属性值') 或者 $(':表单类型值:表单属性值')    可以直接用单层标签名:表单属性写

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值