jQuery（串联操作，操作CSS，属性）

串联操作

基本HTML的布局

<div id="box">
	<ul>
		<li class="item1">1</li>
		<li>2</li>
		<li class="item2">3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</div>

add

$(document).ready(function(){//设置jQuery的入口代码
	console.log($('#box').add('li'))//add 把选中的元素添加到当前集合
})

表示：获取到box这个元素，然后li元素在在通过add方式添加boxjQuery dom里(在获取到原来jQuery dom的基础上用add方式添加li元素)

addBack

$(document).ready(function(){//设置jQuery入口代码
	console.log($('#box').children('ul').addBack())//表示把前面的两个集合合并在一块
})

首先选择到box元素,然后这个box元素的子元素是ul元素,addBack表示把前面获取到的两个元素合并在一块整合在一个jQuery dom里面

contents

$(document).ready(function(){//设置jQuery代码入口
	 console.log($('#box').contents())//获取元素的子节点
})

在jQuery中获取当前元素用contents方法获取到当前元素的字节点。节点的分类如下：

节点的分类：文本节点，注释节点，元素节点，属性节点，文档节点(docuemnt)，文档片段节点 (DocumentFragment)

end

$(document).ready(function(){//设置jQuery入口代码
	console.log($('#box').find('li'))
 })

当前表示获取当box元素，在基于box元素调用find方法查找li元素返回的是5个li(这种操作就叫做破坏性操作)

破坏性操作是指通过一些方法改变了当前的jQuery dom对象(返回值不是原来的jQuery dom对象)

$(document).ready(function(){//设置jQuery入口代码
	console.log($('#box').find('li').end())
	//获取到box元素在调用find方法匹配到子元素li,在通过end方法返回上一次破坏性操作
})

用find方法破坏了当前的box元素的jQuery dom，所以要调用end函数解决这种情况,end表示返回上一次破坏性操作的集合(只要你的返回值发生变化了就是破坏性操作)

调用end函数返回上一次破坏性操作的好处是，可以实现链式操作 如下：

$('#box').css({
	background :'pink',
  }).css({
	width:200,
  })//一般不会真么写，但是验证链式操作也可以真么写

$('#box')本质上获取的是一个jQuery dom元素，然后css这个函数也会返回box属性，css这个方法本质上是没有破坏上一次dom元素的，（这就叫做非破坏性操作）

而find方法就是破坏性操作了,$('#box')是获取到box元素然后调用find方法，这个find方法的返回结果就是5个li了他把之前的box元素改变了，这就是破坏性操作，你要是想返回上一次操作的元素就end方法就可以了

返回结果是没有改变当前的jQuery dom的(这就叫做非破坏性操作)可以用链式操作

返回结果是改变当前的jQuery dom的(这就叫做破坏性操作) 可以调用end函数返回上一次破坏性操作的结果

筛选中的过滤操作和筛选操作都是破坏性操作

操作CSS

基本HTML布局

<div id="box">
    <div class="content"></div>
    <ul>
        <li class="item1">1</li>
        <li>2</li>
        <li class="item2">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

css函数

1，传递对象的方式设置css样式

传递对象的方式设置css样式（设置多个属性）推荐为了代码的维护

$(document).ready(function(){//设置jQuery入口代码
	$('li:even').css({//表示查找索引是偶数为的li
		backgroundColor : 'pink',
	})
})

调用css函数用对象的格式数组li的样式，用:even选择器选择到偶数位的li设置css样式：使用css样式都可以在css这个函数里面设置对应的样式选择器选择到结果那么css函数就都会给你设置上对应的样式 (并且不用写单位一次性到位)

2，传递字符串的方式设置css属性

传递字符串的方式设置css属性（设置单个css属性）

$(document).ready(function(){//设置jQuery入口代码
	$('li:even').css('width',200);
	//表示在索引位置是偶数为的li设置对应的样式，但是只能设置一个
})

也是不用写单位的但是他只能设置一个css属性设置多个css属性无效

3，获取当前元素的值

$(document).ready(function(){//设置jQuery出口代码
	$('li:even').css('width')//表示查询索引位数是偶数位的li元素的宽度值
	//但是他能获取到第一个li的width值
})

即使选择器能选择到所有元素，但是我获取就要获取集合中的第一个元素的css属性,设置能设置所有选择器选中的属性但是获取就能获取到第一个属性

//设置标签的样式
css({
    属性1:值1,
    属性2:值2
    ...
 })
 //获取当前标签的属性
 css(属性名)  获取集合中第一个元素的css属性值

位置属性

offset函数

获取元素位置

$(document).ready(function(){//设置jQuery的入口代码
	//获取当前选择器选中元素的 left值  和  top值
	console.log($('#box').offset())
})

offset函数的返回的是一个对象里面的left 和 top 值，是相对于浏览器左上角来定位计算的获取元素基于浏览器左上角的距离。

设置元素的元素的 left和top值

$(document).ready(function(){//设置jQuery的入口代码
	$('#box').offset({
		 left:100,
		 top:120,
	})
	//表示设置当前元素的offset函数 left值是100 top值是120
})

设置元素box元素的left值和top值， offset函数里面传递的是一个对象是用于设置属性的left和top值

position函数

获取当前position函数的值

$(document).ready(function(){//设置jQuery的入口代码
	console.log($('#box').position());//表示获取当前元素带有定位属性的left值和top值
	//返回一个对象 记录元素距定位父级左上角的位置
})

不可以设置position的值

$(document).ready(function(){//设置jQuery的代码
	$('#box').position({
		left:20,
	})//不可以设置元素距定位父级左上角的位置
})

scrollLeft&&scrollTop函数

CSS样式代码

        #box{
            position:relative;
            width:200px;
            height:200px;
            padding:20px;
            border:30px solid blue;
            background: pink;
            overflow:auto;
        }
        .content{
            width:500px;
            height:100px;
            background: #000;
        }

HTML基本布局代码

<div id="box">
    <div class="content"></div>
    <p>花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生花生</p>
</div>

获取scrollLeft&&scrollTop

$(document).ready(function(){//设置jQuery的代码
	$('#box').scrollLeft()//获取当前水平方向滚动条的距离
	$('#box').scrollTop()//获取当前竖直方向滚动的距离
})

当前scrollLeft和scrollTop函数执行不加任何的参数表示查询box这个元素水平滚动的距离和竖直方向滚动的距离，获取当前滚动条水平方向的数值和竖直方向的竖直

设置scrollLeft&&scrollTop

$(document).ready(function(){//设置jQuery的出口代码
	$('#box').scrollLeft(50);//设置当前元素滚动条的水平方向距离
	$('#box').scrollTop(50);//设置当前元素滚动条的竖直方向距离
})

当前scrollLeft和scrollTop函数执行传递的数字是表示设置当前元素滚动条的水平距离和竖直距离

其他位置属性

HTML的基本布局，CSS基本样式和上面的完全一致

<div id="box"></div>

innerWidth&&innerHeight函数

$('#box').ready(function(){//设置jQuery的入口代码
     console.log($('#box').innerWidth())//表示获取宽度值(左右padding值+width值)
     console.log($('#box').innerHeight())//表示获取高度值(上下padding值和height值)
})

当innerWidth和innerHeight函数中没有值执行是获取当前元素的值，传递数值进去的话表示设置当前innerWidth和innerHeight函数中的值

outerWidth&&outerHeight函数

 $('#box').ready(function(){//设置jQuery的入口代码
	console.log($('#box').outerWidth());
	//表示获取点前width值(左右padding+左右border+width值)
	console.log($('#box').outerHeight());
	//表示获取当前height值(上下padding+上下border+height值)
})

当outerWidth和outerHeight函数中没有传递参数执行表示获取当前元素的值，传递数字进去的话表示设置当前outerWidth和outerHeight函数中的值

width&&height函数

$('#box').ready(function(){//设置jQuery的入口代码
	console.log($('#box').width());//获取当前元素的width值
	console.log($('#box').height());//获取当前元素的height值
	$('#box').width(200);//设置当前元素的width值
	$('#box').height(200);//设置当前元素的height值
})

width和height函数，都可以在函数不传参数的时候获取当前元素的值，都可以在传递参数(数值)的时候设置当前元素的值

获取元素的位置

offset函数

offset() 返回一个对象记录元素距浏览器左上角的位置
offset(对象) 设置元素距浏览器左上角的位置

position函数

position() 返回一个对象记录元素距定位父级左上角的位置
position(对象) 不可以设置元素距定位父级左上角的位置

scrollLeft函数

scrollLeft() 返回滚动条的水平滚动距离
scrollLeft(数值) 设置滚动条的水平滚动距离

scrollTop函数

scrollTop() 返回滚动条的竖直滚动距离
scrollTop(数值) 设置滚动条的竖直滚动距离

height函数

height() 返回当前元素的高度值
height(数值) 设置当前元素的高度值

width函数

width() 返回当前元素的宽度值
width(数值) 设置当前元素的宽度值

innerHeight函数

innerHeight() 返回结果当前元素的宽度值(上下padding值+height值)
innerHeight(数值) 设置当前元素的高度值

innerWidth函数

innerWidth() 返回结果当前元素的宽度值(左右padding值+width值)
innerWidth(数值) 设置当前元素的宽度值

outerHeight函数

outerHeight() 返回结果是当前元素的高度值(上下padding值+上下border值+height值)
outerHeight(数值) 设置当前元素的高度值

outerWidth函数

outerWidth() 返回结果是当前元素的高度值(左右padding值+左右border值+width值)
outerWidth(数值) 设置当前元素的高度值

属性

HTML基本布局

<img src="1.jpg" cdfsb="fge">
<img src="2.png">
<img src="3.jpg">
<div id="box">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
   </ul>
 </div>
 <input type="text" value="vsgbdnf">

attr

用attr函数设置标签的合法属性（常用）

$(document).ready(function(){//设置jQuery入口代码
    $('img').attr('title','花生')//通过attr函数给title属性设置花生值
})

给元素设置属性(任何属性都可以通过attr这个函数设置对应的属性名和属性值)，先选择到3个img在通过attr函数给3个img设置title值是花生

用arr函数设置标签的非法属性

$(document).ready(function(){//jQuery的入口代码
    $('img').attr('sdfghrd','hausheng');//通过attr函数设置一个非法的属性
})

通过attr函数可以给任何非法属性和合法属性，对应img标签来说他本身就没有这个sdfghrd属性，说明他是非法属性

用attr函数获取合法属性

$(document).ready(function(){//设置jQuery入口代码
    console.log($('img').attr('src'))//通过attr的方法获取到img元素中的src属性
})

attr这个方法只能获取到合法属性的当前集合中的第一个属性，当前是获取到了3个img，然后在通过attr获取到当前集合中的第一个src属性值

用attr函数获取非法属性

$(document).ready(function(){//设置jQuery入口代码
    console.log($('img').attr('cdfsb'))//通过attr函数也能获取到当前函数中的非法属性
})

获取非法属性只能获取到当前集合中的第一个属性，当前是获取到了3个img，然后在通过attr获取到当前集合中的第一个src属性值

合法属性&&非法属性

合法属性是：本身标签是存在这个属性是天生就有的这就叫做合法属性
非法属性是：本身表示是不存在这个属性的是人为随便设置的这就叫做非法属性

removeAttr

去除到某个合法属性和某个非法属性

$(document).ready(function(){//设置jQuery入口代码
    $('img').removeAttr('src');//通过removeAttr去除src这个合法属性
    $('img').removeAttr('cdfsb');//通过removeAttr去掉cdfsb这个非法属性
 })

通过removeAttr可以删除某个合法属性和非法属性，当函数执行的时候传递一波字符串里面填写要删除的属(是以字符串形式)展现的就可以删除了

prop

prop表示设置合法属性

$(document).ready(function(){//设置jQuery入口代码
    $('img').prop('title','合法属性')//当前表示img元素通过prop方法设置了合法属性
    $('img').prop('cadcv','非法属性')//当前是img元素通过prop方法数组非法属性
    console.log($('img').prop('cadcv'))
    //用prop数设置的非法属性是不会展示到页面当中的，但是他能查询到
    console.log( $('img').prop('alt'));//当prop传递一个参数的时候表示获取当前元素的值
})

通过prop方式设置合法属性是能给表现在HTML标签上的，通过prop方法设置的非法属性是不会表现在HTML标签上的但是他能查询到是有这个非法元素的

removeProp

$(document).ready(function(){//设置jQuery入口代码
    $('img').prop('acdsfgb','非法属性')
     // prop函数可以设置非法属性但是这个非法属性是不会表现在HTML标签当中的
     //(attr是能表现在HTML标签上的)
     console.log($('img').prop('acdsfgb'))//查询当前通过prop设置的非法属性
     $('img').removeProp('acdsfgb')//删除当前的非法属性
     $('img').removeProp('src')//删除当前的合法属性是无效的
  })

removeProp函数执行不能删除合法属性(删除合法属性是无效的)

那通过removeProp可以删除那些通过prop方式设置上的非法属性(删除非法属性是没有表现在HTML标签上的非法属性)

attr

attr(属性名，属性值) 设置元素合法/非法属性
attr(属性名) 获取元素的合法/非法属性

removeAttr

removeAttr(属性名) 删除元素合法/非法属性

prop

prop(属性名，属性值)：设置元素合法属性
prop(属性名，属性值)：设置非法属性是不会表现在html标签上

removeProp

removeProp(属性名)：删除没有表现在html标签上的非法属性

总结

通过attr设置元素的合法属性和非法属性都能展示到HTML标签上也都能通过removeAttr删除
通过prop设置元素的合法属性是能够展示到HTML标签上的，但是设置非法属性是不能展示到HTML标签上的，通过removeProp非法是能够删除那些通过prop设置的非法属性，不能删除掉合法属性(无效)

addClass添加类名

$(document).ready(function(){//设置jQuery入口代码
   $('img').addClass('huashneg')//通过addClass方式他img元素上添加类名
   $('img').addClass('huashneg1');//在原来的基础上再次添加类名
})

通过addClass方式可以给当前选中的元素添加类名(这个addClass函数添加类名的时候会在原来的基础上添加类名不会管之前有什么类名)

removeClass删除类名

$(document).ready(function(){//设置jQuery入口代码
    $('img').addClass('huashneg')//通过addClass方式他img元素上添加类名
    $('img').addClass('huashneg1')
    $('img').removeClass('huashneg1');//通过removeClass删除当前括号里面的类名
 })

通过removeClass方式删除类名的时候会删除当前指定的类名不会删除其他的类名

toggleClass设置切换类名

$(document).ready(function(){//设置jQuery入口代码
   $('img').toggleClass('toggle1')//当前调用toggleClass是设置元素的类名
   $('img').toggleClass('toggle1')//当前是在次调用toggleClass函数表式删除当前类名(切换)
})

当前是通过toggleClass设置类名，在次调用toggleClass是切换类名(删除前一次通过toggleClass添加的类名)

toggleClass切换类名，表示你第一次有toggle1这个类名我就可以给你添加上去这个类名(元素上有别的类名就会在这个类名的基础上添加)
在次通过toggleClass方式添加类名的话就会把之前的类名给起换掉(删除前一次通过toggleClass方式添加的相同类名)不会影响到被的类名

html函数

html函数相当于原生js中的innerHTML

$(document).ready(function(){//设置jQuery入口代码
    	console.log($('#box').html())//获取当前元素的文本内容
         //获取box元素里面的文本内容(内容是标签的话也会呈现在文本中)，
         //就是相当于元素js中的innerHTML函数
          $('#box').html('<p>我是p标签的内容</p>')//设置当前元素的内容
       //把box元素内容中的文本设置成html函数中()里面的内容，他会把有标签形式的字符串解析成标签
 })

text函数

text函数相当于原始js中的innerText

$(document).ready(function(){//设置jQuery入口代码
      console.log($('#box').text())
      //表示获取box元素中的内容，跟原生js中的innerText类似
      $('#box').text('<p>我是p标签的内容</p>')
      //text函数在设置的时候不会把带有标签形式的字符串转换成标签而是单纯的文本内容
})

val函数

$(document).ready(function(){//设置jQuery入口代码
    console.log( $(':text').val())
      //:text表示选择页面中有单行文本框的元素(type='text')，
      //在通过val函数获取当当前元素的value值
      $(':text').val('我是value的内容')//val函数中执行传递的参数是表示设置在当前input框中的内容
      //而不是设置value值是不会改变当前value值的
 })

html

html() 获取元素的html文本内容
html(文本) 设置元素的html文本内容

text

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

val

val() 获取input的文字value
val(数据) 设置input的文字value

巧克力很苦

发布了134 篇原创文章 · 获赞 109 · 访问量 7万+

私信关注