李南江Jquery笔记01--获取界面袁术，入口函数写法，核心函数，接受dom元素，操作静态和实例方法，遍历数组及伪数组，map等，选择器，属性及属性节点，prop和attr，增删切类，操作css

最新推荐文章于 2023-05-09 13:45:41 发布

心湖中的石子

最新推荐文章于 2023-05-09 13:45:41 发布

阅读量286

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/weixin_43745804/article/details/114013815

版权

Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、初始Jquery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *margin{padding:0;}
    .whole{width: 400px; height: 400px}
    div{ width: 100px; height: 100px; border: 1px solid gray}

  </style>
</head>
<body>
<div class="whole">
  <div class="box1">  </div>
  <div id="box2"></div>
</div>
<script>
  window.onload=function(){
    let div1=document.getElementsByTagName("div")[0];
    let div2=document.getElementsByClassName("box1")[0];
    let div3=document.getElementById("box2");
    console.log(div1)
    console.log(div2)
    console.log(div3)
    console.log('--------------')
    div2.style.backgroundColor='red';
  }

  $(function () {
    let $div1=$("div")[0];
    let $div2=$(".box1")[0];
    let $div3=$("#box2")[0];
    console.log($div1)
    console.log($div2)
    console.log($div3)
    let $div4=$("#box2");
    let $div5=$(".box1");
    $div4.css({background:"green",width:'200px'})
  });
</script>

</body>
</html>

2、拿到界面所有元素

<script>
  //原生js拿到界面所有元素
  window.onload=function(){

  }
//拿到界面所有元素，类似于原生JavaScript的
  $(document).ready(function(){

  })
</script>

3、从入口函数拿到dom元素

原生js会等到dom元素加载完毕，并且图片也加载完毕才会执行
jquery会等到dom元素加载完毕，但不会等到图片也加载完毕就会执行（貌似jquery3.5.1已经解决类似问题）
原生的js，多个入口函数，后写的入口函数会覆盖先写的入口函数
jquery，编写多个入口函数可以并存，不会后写覆盖先写

<body>
<img src="images/gril03.jpg"/>
<script>
  //原生js拿到界面所有元素
  window.onload=function(){
    let img=document.getElementsByTagName('img')[0];
    //类似于计算属性,拿到dom元素的宽高等属性
    let width=window.getComputedStyle(img).width;
    console.log(width)
  }
//拿到界面所有元素，类似于原生JavaScript的
  $(document).ready(function(){
    let $myimg=$('img');
    console.log($myimg)
    //直接通过内置函数拿
    let $width=$myimg.width()
    console.log($width+'===')
  })
</script>

</body>

4、入口函数的其他写法

1、第一种常用

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

2、第2种复杂

jquery(document).ready(function(){})

3、第3种最简单(推荐）

$(function(){})

4、第4种soso

jquery(function(){})

5、jquery冲突（jQuery.noConflict）

当引入多个框架（js）时，有可能$符号会有冲突，在jquery代码最前端写入jQuery.noConfilict()则可以避免冲突，但是，在jquery中也就不能再使用 $符号了

6、jquery核心函数

$() 表示调用jquery的核心函数，主要看这个函数能接受什么参数，是对象，还是回调函数，还是两者兼而有之
可以接受的内容为：

1、接收一个函数
2、接受一个字符串选择器
3、接收一个代码片段
4、接受一个dom选择器

<body>
<div id="box1"></div>
<span>zhangan</span>
<script>
  //1、接收一个函数
  $(function(){
    console.log('3rd method')
  })
  //2、接收一个字符串选择器
  let $box1=$('#box1');
  //3、接收一个代码片段
  let $p=$("<p>我是段落</p>");
  $box1.append($p);
  //4、接收一个dom元素
  let myspan=document.getElementsByTagName('span')[0];
  //使用核心函数接受一个dom元素可以把该dom元素包装成一个jquery对象（jQuery.fn.init [span]）
  let $myspan=$(myspan)
  console.log($myspan)
</script>

</body>

7、jquery接收dom元素

jquery在获取dom元素后生成的jquery对象和数组非常想，一个数组元素对应dom的一个节点，即jquery对象是一个伪数组。有length-1个元素

8、jquery的静态方法和实例方法

<script>
  //定义一个类
  function Aclass(){

  }
  //给这个类添加一个静态方法
  Aclass.staticMethod=function(){
    console.log('here is a staticMethod')
  }
  //静态方法通过类名来调用
  Aclass.staticMethod();

  //给类添加实例方法（使用原型）
  Aclass.prototype.instanceMethod=function(){
    console.log('here is a instance method')
  }
  //创建一个实例
  let myinstance=new Aclass();
  //通过实例调用实例方法
  myinstance.instanceMethod();
</script>

9、jquery遍历数组及伪数组

<script>
  let myArray=[1,2,4,56,7];
  //创建一个伪数组
  let fakeArray={0:1,1:4,2:6,3:9}
  //原生遍历
  for (item in myArray){
    console.log(myArray[item])
  }
  //原生遍历，只能遍历数组，不能遍历伪数组
  myArray.forEach(function(value,index){
    console.log(index,value)
  })

  //原生遍历伪数组
  for (item in fakeArray){
    console.log(fakeArray[item])
  }
  //jquery遍历
  $.each(myArray,function(index,value){
    console.log(index,value)
  })
  //jquery遍历伪数组
  $.each(fakeArray,function(index,value){
    console.log(index,value)
  })
</script>

10、jquery的map方法

和each一样可以遍历伪数组，
each遍历完数组后后，会返回一个遍历过的的数组，map会默认返回一个空数组，但可以在回调函数中编写一个逻辑，填充这个空数组，map具有更大的灵活性

<script>
  let myArray=[1,2,4,56,7];
  //创建一个伪数组
  let fakeArray={0:1,1:4,2:6,3:9}
  //利用原生的map方法,第三个参数能额外传一个当前遍历的数组
  myArray.map(function(value,index,array){
    console.log(index,value,array)
  })
  //jquery的map方法遍历数组
  $.map(myArray,function(value,index){
    console.log(index,value)
  })
  const mymap=$.map(myArray,function(value,index){
    return value*2
  })
  console.log(mymap)
  //jquery的map方法遍历伪数组
  $.map(fakeArray,function(value,index){
    console.log(index,value)
  })
</script>

11、jquery的trim（str），isArray（obj），isfunction（obj），iswindow（obj）方法

<script>
  let str="     mytrim--     ";
  let $mytrim=$.trim(str);
  console.log($mytrim)
  let obj={'name':'zhangsan',"age":30}
  let fun=function(){}
  let win=window;
  console.log($.isWindow(str))
  console.log($.isWindow($mytrim))
  console.log($.isWindow(obj))
  console.log($.isWindow(fun))
  console.log($.isWindow(win))

  console.log("******")

  let myarray=[3,4,6,78,9]
  let fakeArray={0:1,1:4,2:6,3:9}

  console.log($.isArray(myarray))
  console.log($.isArray(fakeArray))
  console.log($.isArray(obj))

  console.log('----')
  let myfun=function(){
    console.log('i am a function')
  }
  console.log($.isFunction(myfun))



</script>

12、jquery的holdready（）

<script>
  //暂停ready方法的执行
  $.holdReady(true)
  $(document).ready(function(){
    console.log('ready todo something')
  })
</script>
<button>mybutton</button>
<script>
 let btn=document.getElementsByTagName('button')[0];
 //jquery添加事件
  $('button').on('click',function(){
    $.holdReady(false)
  })

</script>

13、jquery的选择器

：contains(text)
：empty
：has（selector）
：parent

<body>
<div></div>
<div>i am div</div>
<div>i am div 2233444</div>
<div><span></span></div>
<div><p></p></div>
<script>
$(function(){
  //找到空的div，无子元素无内容
  let $div=$("div:empty")
  console.log($div)
  //找作为父亲的div，即有子元素或者内容的div
  let $pdiv=$("div:parent")
  console.log($pdiv)
  //找到包含文本的div
  let $cdiv=$('div:contains("am")')
  console.log($cdiv)
  //找到包含某种子元素的div
  let $sdiv=$('div:has("span")');
  console.log($sdiv)
})
</script>

</body>

14、原生js的属性和属性节点

1、属性就是对象身上保存的变量
2、用点句法获得属性，对象.属性名称=值，也可以使用中括号对象[‘对象名’]=值
3、标签中的属性就是属性节点，
4、操作属性节点使用setAttribute进行修改，getAttribute获取属性节点
5、任何对象都有属性但只有jquery有属性节点

原生的写法

<body>
<span name="myattrnode" class="lili"></span>
<script>
$(function(){
  function Person(){

  }
  let p1=new Person();
  p1.name='zhangsan';
  p1['address']='beijing';
  console.log(p1.name)
  console.log(p1['address'])

  let span=document.getElementsByTagName("span")[0];
  span.setAttribute("name","myspan")
  console.log(span.getAttribute('name'))

})
</script>
</body>

15、jquery的属性和属性节点

attr（name|pro|key,val|fn）

作用：获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数，如果传递一个参数，代表获取属性节点的值，如果传递两个参数，代表设置属性节点的值，

1、传递一个参数，则获取这个属性节点，即便有多个节点，只返回第一个节点

<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>
<script>
$(function(){
  console.log($('span').attr('class'))
})
</script>

2、传递2个参数，则设置这个属性节点，如果有多个节点，就设置多少个节点

<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>
<script>
$(function(){
  $('span').attr('class','span12')
  console.log($('span').attr('class'))
})
</script>

3、如果是用setAttribute设置一个没有的节点，则会新增一个节点

<body>
<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>

<script>
$(function(){
  $('span').attr('style','style12')
  console.log($('span').attr('style'))
})
</script>

</body>

5、使用removeAtrr删除属性节点

<body>
<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>

<script>
$(function(){
  $('span').attr('style','style12')
  console.log($('span').attr('style'))

  $('span').removeAttr('style')
})

</script>

</body>

5、使用removeAtrr删除多个属性节点使用空格隔开多少个属性节点名称

<body>
<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>

<script>
$(function(){
  $('span').attr('style','style12')
  $('span').attr('script','script12')

  $('span').removeAttr("style script")//空格隔开
})

</script>

</body>

16、jquery的prop方法和removeProp方法

和attr及removeAtrr方法类似，prp是用来操作属性的
1、找到多个标签元素使用eq（）
如eq（0）第一个元素，eq（1）第二个元素，以0为开始

<body>
<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>

<script>
$(function(){
  $('span').attr('style','style12')
  $('span').eq(1).attr('script','script12')

})

</script>

</body>

2、使用一个参数获取的时候只能获取第一个属性节点值

<body>
<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>

<script>
$(function(){
  $('span').eq(0).prop('demo','demo12')
  $('span').eq(1).prop('demo','demo24')

  console.log($('span').prop('demo'))
})

</script>

</body>

3、使用removeProp方法会删掉所有属性节点的值

<script>
$(function(){
  $('span').eq(0).prop('demo','demo12')
  $('span').eq(1).prop('demo','demo24')

  console.log($('span').prop('demo'))

  $('span').removeProp('demo')
  console.log($('span').prop('demo'))
})

</script>

</body>

4、prop不仅可以操作属性，还能操作属性节点

<body>
<span name="myattrnode" class="span1"></span>
<span name="urattrnode" class="span2"></span>

<script>
$(function(){

  console.log($('span').prop('class'))
  $('span').prop('class','box')
  console.log($('span').prop('class'))
})

</script>

</body>

17、什么时候使用prop和attr

在返回ture或者false的属性节点，如checked，selected或者disabled使用propro，其他使用attr

18、属性节点案例

<body>
<input type="text" value="testvalue">
<button>更换图片</button><br/>
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
<script>
$(function(){

  $('button').on('click',function(){
    let imageaddress=$('input').prop('value');//获取这个value需要使用prop而不能使用attr
    console.log(imageaddress)
    $('img').eq(0).attr('src',imageaddress)
  })
})
</script>
</body>

19、添加、删除、切换类addClass，removeClass，toggleClass

1、addClass(class|fn)//添加类
2、removeClass([class|fn])//删除类
3、toggleClass(class|fn[,sw])//切换类，有就切换，没有就创建

<body>
<div class="basestyle">演示内容</div>
<button>添加类</button><br/>
<button>删除类</button><br/>
<button>切换类</button><br/>
<script>
$(function(){
  $('button').eq(0).on('click',function () {
    //$('div').addClass('redfont')
    $('div').addClass('backGround redfont')//同时添加多个类
    console.log('添加类')
  })
  $('button').eq(1).on('click',function () {
    $('div').removeClass('backGround')
    console.log('删除类')
  })
  $('button').eq(2).on('click',function () {
    $('div').toggleClass('newStyle')
    console.log('切换类')
  })


})
</script>
</body>

20、文本值相关方法

1、html([val|fn])//设置html
2、text([val|fn])//设置text
3、val([val|fn|arr])//设置value

<body>
<div >演示内容</div>
<input value="fakevalue" type="text"><br/>
<button>设置html</button><br/>
<button>获取html</button><br/>
<button>设置text</button><br/>
<button>获取text</button><br/>
<button>设置value</button><br/>
<button>获取value</button><br/>
<script>
$(function(){
  $('button').eq(0).on('click',function () {
    $('div').eq(0).html('<span>我的另一段演示内容</span>')
  })
  $('button').eq(1).on('click',function () {
    console.log($('div').eq(0).html())
  })
  $('button').eq(2).on('click',function () {
    $('div').eq(0).text('我重新设置了txt的内容')
  })
  $('button').eq(3).on('click',function () {
    console.log($('div').eq(0).text())
  })
  $('button').eq(4).on('click',function () {
    $('input').eq(0).val('我重新设置了value的内容')
  })
  $('button').eq(5).on('click',function () {
    console.log($('input').eq(0).val())
  })
})
</script>
</body>

21、操作css样式–设置css样式

1、逐个设置css样式
2、链式设置css样式
3、批量设置样式,传入一个对象
4、获取css样式

<body>
<div >演示内容</div>

<script>
$(function(){
  //逐个设置css样式
  $('div').eq(0).css("color",'red')
  //链式设置css样式
  $('div').eq(0).css("color",'red').css("width",'100px').css("height",'100px').css("border","1px solid gray")
  //批量设置样式,传入一个对象
  $('div').eq(0).css({ fontWeight:'bold',backgroundColor:'green' })
})
//获取css样式
  console.log($('div').eq(0).css('backgroundColor'))
</script>
</body>

22、关于自绝父相之问题

在进行元素排版的时候，采用定位方式来进行排版是很常见的，我们常常使用“子绝父相”的方式来进行布局，即父元素的定位属性为relative，子元素的定位设置为absulote，绝对定位的元素，相对于距该元素最近的已定位的祖先元素进行定位。

此元素的位置可通过 “left”、”top”、”right” 以及 “bottom” 属性来规定。如果父元素设置了padding,border,margin，则子元素定位的参考坐标是父元素padding的左上角，而不是父元素content的左上角

23、操作css样式–设置位置

1、height([val|fn])
2、width([val|fn])
3、innerHeight()
4、innerWidth()
5、outerHeight([soptions])
6、outerWidth([options])
7、offset（）//获取元素距离窗口的偏移位
8、position（）//获取元素距离定位元素的偏移位置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/jquery.js"></script>
  <style type="text/css">
    *{margin:0; padding: 0}
    .father{width: 200px; height: 200px; background-color: green;
      position: relative; border:50px solid gray;}
    .son{ width: 100px; height: 100px; background-color: blue; position:absolute;left: 50px;top: 50px}
  </style>
</head>
<body>
<div class="father" >
  <div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
<script>
$(function(){
  $('button').eq(0).on('click',function(){
    console.log($('.father').width())//返回200
    console.log($('.father').offset())//返回坐标系
    console.log($('.son').offset())//返回坐标系
    console.log($('.son').position())//返回坐标系
    console.log($('.son').position().left)//返回坐标系
    console.log($('.son').offset().left)//返回坐标系
  })
  $('button').eq(1).on('click',function(){
    $('.father').width(300)
    console.log($('.father').width())//返回300
  })
})
</script>
</body>
</html>

24、操作css样式–scrolltop，scrollleft

srcolltop：获取/设置元素/网页滚动的纵向偏移位
srcollleft：获取/设置元素//网页滚动的横向偏移位

$('button').eq(1).on('click',function(){
    $('.father').scrollTop()//设置滚动的偏移位
    $('.father').scrollLeft()
    console.log($('.father').scrollTop())
    console.log($('.father').scrollLeft())
	$('.father').scrollLeft()//设置滚动偏移量
	console.log($('html').scrollTop())//获取网页的滚动偏移量，但受浏览器厂家的影响，ie要使用body而不是html
	//解决办法是，body+html
	console.log($('body').scrollTop()+$('html').scrollTop())
	$('html').scrollTop(200)//设置网页滚动偏移量
	$('html，body').scrollTop(200)//浏览器兼容写法
  })

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
李南江Jquery笔记01--获取界面袁术，入口函数写法，核心函数，接受dom元素，操作静态和实例方法，遍历数组及伪数组，map等，选择器，属性及属性节点，prop和attr，增删切类，操作css

1、初始Jquery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.js"></script> <style type="text/css"> *margin{padding:0;} .whole{wid
复制链接

扫一扫

专栏目录