jQuery选择器及jQuery基本操作

吐血整理,如有错误,欢迎指出,感激不尽~

1. jq选择器

  • jq的选择器,就是在执行jq函数时传参
  • 是用来获取DOM元素的方法,通过下标可以获取其中某一个DOM元素
  • $ 函数不管使用选择器选中了几个元素,$函数的返回值都是一个对象(伪数组)
  • jq选择器是jq最核心的内容,大大简化的了DOM对象的查询
  • css1-css3的选择器,都可以当做$函数的参数,如下:
Id选择器: $("#box");
Class选择器: $(".box");
标签选择器: $("span");
通配符选择器: $("*");
包含选择器:  $("#box p");
子选择器: $("#box>p");
群组选择器: $("#box,.cont,p");
属性选择器: $("input[type=button]");
  • 还有一些特殊的选择器,如下:
$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even");
  • 及jq的筛选器(对选择器获取到的一组标签对象进行筛选,便于链式编程),如下:
.first(): 匹配第一个
.last(): 匹配最后一个
.eq(): 匹配指定下标
.find(): 匹配指定的后代元素
.children(): 匹配指定的子元素
.prev(): 匹配上一个兄弟
.prevAll(): 匹配上面所有的兄弟
.next(): 匹配下一个兄弟
.nextAll(): 匹配下面所有兄弟
.siblings(): 匹配所有兄弟,不管上下
.parent(): 匹配直接父级
.parents(): 匹配所有父级
.end(): 匹配链式编程选择器的上一级
  • jq的$函数类似于原生就是document.querySelectorAll()
  • 实际上先有jq,然后原生js才有了querySelectorAll()
  • 原生js的DOM对象和jq的DOM对象的转换方式:
// 原生js转jq
    $(原生DOM对象);
// jq转原生js
    jqDOM对象[0];
  • jq选择器的使用方法如下,部分举例,希望大家可以举一反三哦~~
// 属性
$("input[abc=hello][qwe]").css("background","red");

// 包含:后代
$(".msg h2").css("background","red");

// 群组:
$("#box,.cont,span").css("background","red");

// 包含:子
$(".msg>h2").css("background","red");

// 下一个兄弟
$(".msg+span").css("background","red");
// 下面所有兄弟
$(".msg~span").css("background","red");

// 指定索引,从0开始
$(".cont:eq(1)").css("background","red");

// 第一个或最后一个
$(".list li:first").css("background","red");
$(".list li:last").css("background","red");

// 第奇数个或第偶数个
$(".list li:odd").css("background","red");
$(".list li:even").css("background","red");

// 匹配所有兄弟
$(".list").siblings().css("background","red");

// 匹配直接父级或所有父级
$(".xbox").parent().css("border","solid 1px black");
$(".xbox").parents().css("border","solid 1px black");

// 简单连缀
$(".list").children("li").eq(3).end().css("background","red");

2. 属性操作

原生JS设置属性方式如下:

ele.setAttribute()
ele.getAttribute()

那么来看jq,如下:

①.attr()方法:
attr()

标签对象.attr(属性): 获取指定属性的属性值
标签对象.attr(属性 , 属性值): 设定属性和属性值
标签对象.attr(自定义属性 , 属性值): 设定自定义属性和属性值

注意:jq中的设置方法一般都可以为全部选中的元素设置,也就是说atrr方法内部自带了循环操作。而获取方法一般只能 获取第一个选中的元素。设置属性时,直接显示在标签上,为可见的内置或自定义。

removeAttr()

$('.box').removeAttr('name');
// 删除所有类名为box的name属性

②.prop()方法:
prop():

标签对象.prop(属性): 获取指定属性的属性值
标签对象.prop(属性 , 属性值): 设定属性和属性值
标签对象.prop(自定义属性 , 属性值): 设定自定义属性和属性值

注意: 设置内置属性时,可以直接显示在标签上,为 可见的内置属性 设置自定义属性时,不会直接显示在标签上,为不可见的自定义属性。

removeProp():删除指定的属性,多用于自定义属性。


3. Class操作

最常用的一个属性操作是类名
原生JS操作方式如下:

ele.className = 'item';

那么来看jq,如下:

hasClass(class): 判断标签是否具有某个class,返回布尔值。
addClass(class) :为每个匹配的元素添加指定的类名。
removeClass(class) :从所有匹配的元素中删除指定的类。
toggleClass(class):如果存在(不存在)就删除(添加)一个类。

示例代码(1):

$('.box').hasClass('item');
$('.box').addClass('item');
$('.box').removeClass('item');
$('.box').toggleClass('item');	

示例代码(2):

①hasClass:

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

②addClass:

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

③removeClass:删除最后一个元素上与前面重复的class。

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

④toggleClass:根据父元素来设置class属性。

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

4. 样式操作

(1)原生JS操作方式如下:

ele.style.width
getComputedStyle

(2)那么来看jq,如下:

标签对象.css(属性):获取指定属性的属性值
标签对象.css(属性 , 属性值) : 设定属性以及属性值
标签对象.css({属性 : 属性值}) :以对象的形式,设定属性以及属性值,也可以同时设定多个属性,属性定义的方式比较灵活

示例代码:

$('.box').css('width',100)
//将类名为box的元素宽度设置为100
$('.box').css('width')
//获取第一个类名为box的元素的宽度

(3)注意:

当用.css({属性 : 属性值}) 这种方法时,因为是对象的形式,所以,其背景颜色(background-color)、行高(line-height)、字体大小(font-size)等这种由两个单词中间加中划线组成的属性在书写时,要注意去掉中划线,并写成小驼峰模式。“px”可以省略(但行高(line-height)除外,如果“px”省略,则变成倍数)。

示例代码:

$("#box").css({
    width:"100px",
    height:200,
    background:"red",
    opacity:0.5,
    fontSize:30,
    lineHeight:"100px"
});

5. 内容操作

(1)原生JS操作方式如下:

ele.innerHTML = '< h2 >ddd< /h2 >';
ele.innerText = '< h2 >aaa< /h2 >';
ipt.value = 'zhangsan'

(2)那么来看jq,如下:

.html():获取或者设置元素的html内容,这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中,我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。
.text():获取或者设置元素的文本内容,结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
.val():获取或者设置输入框的内容,在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

示例代码(1):
总结就是:没有参数是获取,有参数是设置

$('.box').html();		// 获取
$('.box').html('aaa');   // 设置

$('.box').text();		// 获取
$('.box').text('aaa');  // 设置


$('.ipt').val();		// 获取
$('.ipt').val('aaa');   // 设置

示例代码(2):
.html()

$("p").html(function(n){
    return "这个 p 元素的 index 是:" + n;
    });

.text()

$("p").text(function(n){
    return "这个 p 元素的 index 是:" + n;
    });

.val()

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

6. 尺寸操作

  • height([val]):取得匹配元素当前计算的高度值(px)。参数的意思是:设定CSS中 ‘height’ 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的高度。

示例如下:以 50 像素的幅度增加 p 元素的高度。

  $("button").click(function(){
    $("p").height(function(n,c){
    return c+50;
    });
  });
  • width([val]):取得第一个匹配元素当前计算的宽度值(px)。设定CSS中 ‘width’ 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的宽度。

示例如下:以 50 像素的幅度增加 p 元素的宽度。

  $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });

注意:以下所有示例的HTML代码为:

<p>Hello</p><p>world</p>
  • innerHeight():获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
  • innerWidth():获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
  • outerHeight():获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。参数设置为 true 时,计算边距在内。
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
  • outerWidth():获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。参数设置为 true 时,计算边距在内。
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
  • offset([coordinates]):获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。方法只对可见元素有效。值对:比如 {top:100,left:0}

代码①:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

代码②:

$("p:last").offset({ top: 10, left: 30 });
  • position():获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

展开阅读全文

Python数据分析与挖掘

01-08
92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元   为什么学习数据分析?       人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。       从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。    本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。   二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。   三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。   四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。   五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值