Develop Reference

Puppeteer.js : get href attribute of link with given text

is there a way in puppeteer to get the href attribute of an anchor element with text "See more".
I want to grab the href attribute of an element like this:
See more
maybe it's possble to do with eval?

you could try looping through all links
document.querySelectorAll('a').forEach(link => link.innerText === "See more" )
This might not work with newer JavaScript versions since querySelectorAll as well as getElementsByTagName do not yield an Array but HTMLCollection which is not iterable using forEach. See the linked answers on SO on how to fix this.

maybe you should try native js
url=document.getElementById("Id_of_AnchorTag").href;
keep in mind that you must be able to uniquely identify the anchor by some method.

Is it possible to apply JQuery to all anchor tags without using a class identifier?

One would usually do something like:
$("a.button").dblclick(function(e) { return false; });
where "button" is the identifying class. However in my case I have a lot of anchors to change in the site, and just want to apply this "prevent double click" feature to all anchor tags in the application
So can I alter this JQuery to apply to all anchor tags?
Thanks.

To select all anchors use $("a")

This should work:
$(document).on("dblclick","a", function(e){return false;});

Use a script to effect on all of images

I have a view that retrieve some images from database and display them. Now I want to add some effects to them. I have use a jquery plugin. look at my code please :
But the script effect just on the first occurred image not all of them. Where is the problem?

Use the JQuery selectors to get all the images in the page:
$('img').adipoli({
'startEffect': 'overlay',
'hoverEffect': 'sliceDown'
});

The problem is you are using an id as a selector ($('#kio'), the # means it's an id) and id's are unique to the page, so only one will be returned. So you should leave the id attribute out of the img tag.
The solution is to use a selector that gives you all the elements you want, in this case probably $('.adipoli-wrapper img') the first part selects all elements with class adipoli-wrapper, then the img part will select all img elements found within those elements.
On a side note: the classname adipoli-wrapper>img you have in your code is not a valid classname,, you probably mean just adipoli-wrapper, that what I'm assuming in my answer.

ID must be unique for each element, use class instead or tag name with context:
$('.myImgClass').adipoli({
'startEffect': 'overlay',
'hoverEffect': 'sliceDown'
});

ID must be unique first of all that's why it's only taking effect on first element with that id so instead of that try this
$('.adipoli-wrapper img').adipoli({
'startEffect': 'overlay',
'hoverEffect': 'sliceDown'
});
it will take effect on all image tag in span that has class adipoli-wrapper or give your image tag a unique class and use this
$('.YourClassName').adipoli({
'startEffect': 'overlay',
'hoverEffect': 'sliceDown'
});

What is the difference between $(this) and this

I have the following code
$('a').click(function() {
var url= this.href;
alert(url);
});
This works just fine and sure enough the returned result is the url of a tag.
However if I change the above code to
$('a').click(function() {
var url= $(this).href;
alert(url);
});
The result is undefined.
Anyone please help to clear this out for me? I am banging my head for this ....

$(this) creates a jQuery object which wraps this. The native DOM object has an href attribute, but jQuery does not.
$(this).attr("href") would work.

this in your case is the actual dom element, so the anchor tag
$(this) is a jquery object that wraps that dom element with all the jquery goodness.
so .href is not an attribute of that jquery object, but it is of the dom object.
you could use $(this).attr('href') to achieve the same thing using the jQuery object.

This is because you're using a javascript DOMElement in the first example and a jQuery Object in the second example. The jQuery Object wraps around the DOMElement and provides you a lot of features.
You can access the url as follow:
$('a').click(function() { var url= $(this).attr('href'); alert(url); });

The difference is between a DOM element and a jQuery selection.
"this" in the code you've given above is a reference to the link's DOM element. $(this) creates a jQuery selection based upon the DOM element that contains only that link.
The jQuery selection will give you different features at the cost of a little performance. Your link element has a href property (i.e. one you can access through this.href) whereas the jQuery selection has all the normal jQuery properties & methods.
For getting the link target, this.href is definitely the way to go. It is simpler, faster and less verbose.

Lots of good answers, just wanted to add that you could also do this:
$('a').click(function(e) {
alert($(this)[0].href);
});

jquery to find all the elements inside a div tag

How to find all the anchor tags inside a div tag and need to append one more property to the anchor tag. say target="_blank".
How can i do this in using jquery?

Do you mean all the anchors in any div element, or in some specific div element? If it's the former, this will do the trick:
$('div a').attr('target', '_blank');
If it's a particular div you're interested in, give that element an id attribute and then use it like so:
$('#divid a').attr('target', '_blank');
replacing "divid" with the id in question.
Can you be more specific about what exactly you want?
In any case, you're going to need to use the attr() function to set the attribute; see the documentation here.

You are probably interested in a single div, not every div on page, so You have to identify it.
$('div#theDivsId a').attr('target','_blank');
or
$('div.theDivsClass a').attr('target','_blank');
PS. read documentation. it's easy.

jQuery("#yourDIV a").attr("target", "_blank");
Have you read the jQuery docs? This can't be more basic.

$('div a').attr('target','_blank');