Wordpress实现调用一篇文章的第一张图片

在HTML中很多时候会有鼠标滑动至一个文章标题或链接然后使得该篇文章的图片显示，这个可以通过jQuery来实现，而在通过wordpress管理后台当中，也可以通过一段代码来简单实现。

html代码的简单样式

<h3 style="font-size: 28px;">实验中学热点新闻</h3>

<li class="list-group-item"><a href="#">我小举行大型文艺活动</a><span class="badge">2016-10-25</span></li>

</ul>

</div>

</ul>

</div>

第一个DIV显示文章标题和时间

第二个div显示想对应图片，实现方法为调用函数

jQuery函数

// 主页热点新闻实现鼠标移动至新闻，显示对应图片

// 所有图片隐藏,隐藏这一步由CSS完成

//初始状态第一张图片显示

$('#center-top .hot-right>ul>li').eq(0).show();

//当鼠标移至新闻链接上时，让该事件产生回调函数

$('.hot-left>ul>li>a').css('color','#666')

$('.hot-left>ul>li').mouseover(function(){

//获取该条新闻的key值，也可称下标

var j=$(this).index();

$(' .hot-left>ul>li').css('background-color','#fff')

$(this).css('background-color','#16A085')

$('.hot-left>ul>li>a').css('color','#666')

$('.hot-left>ul>li>a').eq(j).css('color','#fff')

//隐藏所有图片

$('.hot-right>ul>li').hide();

//对应下标的图片显示

$(' .hot-right>ul>li').eq(j).show();

});

首先在WordPress的functions.php加入以下函数调用第一张图片，代码

//在Function.php里面加入一段获取首张图片的函数：

function catch_that_image() {

global $post, $posts;

$first_img='';

ob_start();

ob_end_clean();

$output=preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img=$matches [1] [0];

if(empty($first_img)){

$first_img=get_bloginfo('template_directory')."/img/default.jpg";

}

return $first_img;

}

通过定义抓取第一张图片的函数catch_that_image()

然后在要实现的页面如index.php中使用loop循环

<?php query_posts('showposts=5&cat=3'); ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post();?>

<li class="list-group-item"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image(); ?>" class="img-responsive" alt=""></a></li>

<?php endwhile;?>

<?php endif;?>

</ul>

<?php wp_reset_query(); ?>

这样就能动态的实现这个功能了！

好程序员web前端学习路线分享jQuery学习技巧，jQuery在web前端学习中是一个必不可少的内容，很多小伙伴都在学习这阶段的时候遇到问题，今天我们就来聊一下jQuery，让我们一起来看一看吧！

1、关于页面元素的引用

通过jquery的$引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象(集合对象)，不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：

$("#msg").html;

$("#msg")[0].innerHTML;

$("#msg").eq(0)[0].innerHTML;

$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项

对于获取的元素集合，获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。

有如下两种方法：

$("div").eq(2).html;//调用jquery对象的方法

$("div").get(2).innerHTML;//调用dom的方法属性

4、同一函数实现set和get

Jquery中的很多方法都是如此，主要包括如下几个：

· $("#msg").html;//返回id为msg的元素节点的html内容。

· $("#msg").html("new content");

· //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

· $("#msg").text;//返回id为msg的元素节点的文本内容。

· $("#msg").text("newcontent");

· //将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

· $("#msg").height;//返回id为msg的元素的高度

· $("#msg").height("300");//将id为msg的元素的高度设为300

· $("#msg").width;//返回id为msg的元素的宽度

· $("#msg").width("300");//将id为msg的元素的宽度设为300

· $("input").val(");//返回表单输入框的value值

· $("input").val("test");//将表单输入框的value值设为test

· $("#msg").click;//触发id为msg的元素的单击事件

· $("#msg").click(fn);//为id为msg的元素单击事件添加函数

· 同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能

· $.extend({

· min:function(a, b){return a < b?a:b; },

· max:function(a, b){return a > b?a:b; }

· });//为jquery扩展了min,max两个方法

· 使用扩展的方法(通过“$.方法名”调用)：

· alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

6、支持方法的连写

所谓连写，即可以对一个jquery对象连续调用各种不同的方法。

例如：

$("p").click(function{alert($(this).html)})

.mouseover(function{alert('mouseover event')})

.each(function(i){this.style.color=['#f00','#0f0','#00f'][i ]});

7、操作元素的样式

主要包括以下几种方式：

· $("#msg").css("background");//返回元素的背景颜色

· $("#msg").css("background","#ccc")//设定元素背景为灰色

· $("#msg").height(300);$("#msg").width("200"); //设定宽高

· $("#msg").css({color: "red", background:"blue" });//以名值对的形式设定样式

· $("#msg").addClass("select");//为元素增加名称为select的class

· $("#msg").removeClass("select");//删除元素名称为select的class

· $("#msg").toggleClass("select");//如果存在(不存在)就删除(添加)名称为select的class

8、完善的事件处理功能

Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。

如：

$("#msg").click(function{alert("good")})//为元素添加了单击事件

$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i ]})

//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：

(1)hover(fn1,fn2)：一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。

//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$("tr").hover(function{

$(this).addClass("over");

function{

$(this).addClass("out");

});

(2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function{alert("Load Success")})

//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

(3)toggle(evenFn,oddFn):每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

//每次点击时轮换添加和删除名为selected的class。

$("p").toggle(function{

$(this).addClass("selected");

},function{

$(this).removeClass("selected");

});

(4)trigger(eventtype):在每一个匹配的元素上触发某类事件。

例如：

$("p").trigger("click");//触发所有p元素的click事件

(5)bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定

从每一个匹配的元素中(添加)删除绑定的事件。

例如：

$("p").bind("click",function{alert($(this).text);}); //为每个p元素添加单击事件

$("p").unbind;//删除所有p元素上的所有事件

$("p").unbind("click")//删除所有p元素上的单击事件

9、几个实用特效功能

其中toggle和slidetoggle方法提供了状态切换功能。

如toggle方法包括了hide和show方法。

slideToggle方法包括了slideDown和slideUp方法。

10、几个有用的jQuery方法

$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera,msie,mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。

$.each(obj,fn)：通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

如

$.each([0,1,2], function(i, n){ alert( "Item #" + i + ": " + n );});

等价于：

vartempArr=[0,1,2];

for(vari=0;i

alert("Item#"+i+": "+tempArr[ i ]);

}

也可以处理json数据，如

$.each({ name: "John", lang: "JS" }, function(i, n){ alert("Name: " + i + ", Value: " + n ); });

结果为：

Name:name,Value:John

Name:lang,Value:JS

$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。

如：

$.extend(settings,options);

//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。

var settings=$.extend({}, defaults, options);

//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数(合并多项并返回)

$.map(array,fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

如：

vartempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr内容为：[4,5,6]

vartempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。

如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：删除字符串两端的空白字符。

如：$.trim(" hello, how are you? "); //返回"hello,how are you? "

11、解决自定义方法或其他类库与jQuery的冲突

很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。

使用jquery中的jQuery.noConflict;方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。

1. 基本要求

前端界面显示的速度一般要求是：60fps

2. 根据要求 1s / 60=16.67ms 即：处理一个界面的时间，除了浏览器自己需要的时间，开发者能使用的时间大概10ms

10ms中处理的流程为：

javascript > style > layout > paint > composite

如果JS的操作影响到了界面样式的变化，则有上面的处理流程

如果style的操作影响到布局，则会进入layout，反之亦然；style改了transform属性，在blink和edge浏览器里面不需要layout和paint

3. 减少渲染堵塞

避免head标签JS堵塞

异步加载JS: HTML5 的script 属性 defer

JS写在body后面

Tips: 可能有时候JS库，还没加载完就要执行了，可能会报错

减少 head 中的 CSS 资源

CSS 会影响到 layout ，写在Body里面会界面闪烁，但写在Head里面如果太多会影响渲染

不要写太多base64，虽然很方便，但会改变文件大小

如果CSS文件没有达到三位数的大小，可以直接写到Html界面中，因为如果使用外链样式，则可能会花费更多时间，如DNS解析，建立链接，下载等

优化图片，使用响应式图片，图片的srcset 属性，会有兼容问题

使用picture按需加载，需要写在HTML中，如果使用JS来调用，则无效

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 还有其它的优化属性，不过会有兼容问题: type='image/webp'

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 标签，只有img标签才会触发onload事件; picture 与 source 都不触发 layout

</picture>

判断浏览器是否支持：

var supportSrcset='srcset' in document.createElement('img');

var surportPicture='HTMLPictureElement' in window;

延迟加载

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 写为此值不会报错，也对浏览器友好

</picture>

监听Scroll事件

showImage(leftSpace=500){

var scrollTop=$window.scrollTop(), $containers=this.$imgContainers, scrollPosition=$window.scrollTop() + $window.height();

for(var i=0; i < $containers.length; i++){

//如果快要滑到图片的位置了

var $container=$containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

ensureImgSrc($container) {

var $source=$container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img=$container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("//") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

init(){

//初始化

var leftSpace=0;

this.showImage(leftSpace);

//滑动

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部显示，off掉window.scroll

if(this.shownCount >=this.allCount){

$window.off("scroll", this.throttleShow);

}

指定图片尺寸，避免 reflow

4. 压缩与缓存

作用

第一个是把200变成304，避免资源重新传输，

第二个是让浏览器直接从缓存取，连http请求都不用了，这样对于第二次访问页面是极为有利的。

开启压缩 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

缓存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法会在返回的请求响应头中添加 Cache-Control: max-age=604800 ，且 max-age 的优先级会大于 last-modified

开启 nginx last-modified 字段，在响应头中： last-modified 字段接收nginx的数据，在请求头中： If-Modified-Since 字段返回给nginx

这个办法得查手册

使用etag，在响应头中是： Etag 字段，在请求头中会记录在 If-None-Match 字段

server {

etag on;

}

5. 其它优化

DNS预读取

HTML优化

删除注释、缩进，除了 pre 或 code 这样的标签不能删除，其它的都可以

代码优化

例如说html别嵌套太多层，否则加重页面layout的压力

CSS的选择器别写太复杂，不然匹配的计算量会比较大

JS的滥用闭包，闭包会加深作用域链，加长变量查找的时间

6. 利用HTML5或CSS3

代替图片或 LocalStorage、 Offline Storage

在线咨询

上一篇：从0搭建一个WebRTC，实现多房间多对多通话，并实
下一篇：Eclipse转型IDEA快速上手指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Wordpress实现调用一篇文章的第一张图片

1. 基本要求

2. 根据要求 1s / 60=16.67ms 即：处理一个界面的时间，除了浏览器自己需要的时间，开发者能使用的时间大概10ms

3. 减少渲染堵塞

4. 压缩与缓存

5. 其它优化

6. 利用HTML5或CSS3

您的项目需求