We Keep Coding

In Linekdin.com. the document.querySelectorAll (".className") does not work

<h3 class="Sans-17px-black-85%-semibold">Director of Entrepreneurship Programs</h3>
This is the Linkedin html code and I'm trying to select, using ...
<i>let x = document.querySelectorAll (".Sans-17px-black-85%-semibold")</i>,
but I always get an error like
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': >'.Sans-17px-black-85%-semibold' is not a valid selector.
However, I am able to select other elements on the page, but not the CV part.
Can someone explain me why this happens and how to make it work?
Thanks in advance.

Identifiers may not contain unescaped per cent characters. You need to escape it.
document.querySelectorAll(".Sans-17px-black-85\\%-semibold")
Note that the per cent sign needs escaping for the selector syntax and then the escape character needs escaping for the JS string literal syntax.
Alternatively, you could avoid using selector syntax:
document.getElementsByClassName("Sans-17px-black-85%-semibold")

Unrecognised expression with error for ids starting with an integer

I'm trying to grab an element from a page which has an id starting with an integer.
$('#3|assets_main|ast_module|start-iso-date')
I get the following error
Uncaught Error: Syntax error, unrecognized expression: |assets_main|ast_module|start-iso-date
I am using jQuery 1.7.1, I understand that the id in general is poorly named but is there any reason why jQuery will has issues with ids that start with integers?

In HTML5 the id can start with a numerical value, so your id is valid.
The issue is the pipe (|) characters in the selector; you need to escape them using \\:
$('#3\\|assets_main\\|ast_module\\|start-iso-date')
Working example

why jquery id selector not support special character

when using the special character to find the element like as below $("#search#") the exception will occur. how to resolve it?
I've tried using the all special character but it's working with * character like $("#search*") without any error, but others #$%^&() throw an error.So why it accepts the * character but why the other character doesn't.

If you have special character for ids, you should escape them using \\ (two backslashes) when you access them. But as far as I know this will only be allowed with html5.
As stated in jquery selector documentation
To use any of the meta-characters ( such as
!"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, it must
be escaped with with two backslashes: \. For example, an element with
id="foo.bar", can use the selector $("#foo\.bar").
alert($("#search\\$").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="search$">Heh</div>

Try utilizing Attribute Equals Selector [name="value"]
$("[id='search#']").click(function() {
$(this).html(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="search#">click</div>

Many special characters are not allowed (Which characters are valid in CSS class names/selectors?).
A way to still select what you want, by looking for all but the special character(s) be seeing what some at the start, end, or contained somewhere within the tag's id.
Starts with: jQuery ID starts with
$('[id^="start-with"]')
Ends with: jQuery Selector: Id Ends With?
$('[id$="ending-part"]')
Contained somewhere within: jQuery ID Contains
$('[id*="any-spot-at-all"]')
There are others ways to "skin the cat" of course - some other selector options for example, to find only a part of a id or class or any other HTML tag attribute can be found at http://api.jquery.com/category/selectors/attribute-selectors/ .

jQuery eq function unexpected behavior

I found a bug in a program I had written, but the behavior of the error is inexplicable to me:
If I have:
<input type="text" name="cust_id" value="666" />
<input type="text" name="phone[]" value="666" />
And then use this selector:
var test = $("input[name=phone[]]:eq(0)");
test.css("color", "red");
I see this:
What I'm surprised by is the fact that the eq(0) selects the first input even though I explicitly tell it to find only ones with name=phone[]
Here is a fiddle: https://jsfiddle.net/1xdnv1t8/
Is this expected behavior? Does the eq selector ignore attribute selectors?

You need to quote name attribute:
var test = $("input[name='phone[]']:eq(0)");
because phone[] is not valid name without quotes. So jQuery parser (or DOM) simply ignores everything invalid and treats selector as if it was simply input[name='phone']:eq(0). Also worth noting, that looks like this behaviour is fixed in more up to date versions of jQuery. You use pretty old 1.6.4 in your demo, but if you check it with 1.8.x and above it will work properly throwing error.
For example, if you try
try {
document.querySelector("input[name=phone[]]")
}
catch(e) {
alert(e.message)
}
it will even throw an error
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': 'input[name=phone[]]' is not a valid selector.
But jQuery is more forgiving and it just selects whatever it can.

Use
var test = $("input[name='phone[]']:eq(0)");
JSFiddle
In the selector especification states
jQuery( "[attribute='value']" )
attribute: An attribute name.
value: An attribute value. Can be either an unquoted single word or a quoted string.

You are missing quotes around the attribute value. Try this -
var test = $('input[name="phone[]"]:eq(0)');

The square brackets in your selector confuse the attribute selection part as it is not quoted. Notice if you change the name of the second input to phone then it works as expected:
$("input[name=phone]:eq(0)")
Alternatively, wrap the attribute selector in quotes:
$("input[name='phone']:eq(0)")

While quoting the name attribute's value isn't strictly required (jQuery for the most part will work fine without them), as you noticed you can run into unusual situations when there are non-alphanumeric characters involved and jQuery interprets them as CSS notation.
The solution is to always properly escape any of these characters (:, ., [, ], etc.) as jQuery recommends, with two backslashes:
In order to tell jQuery to treat these characters literally rather
than as CSS notation, they must be "escaped" by placing two
backslashes in front of them.
So according to the jQuery documentation, you should be using var test = $("input[name='phone\\[\\]']:eq(0)"); as the selector (although simply properly quoting the string in your case will also work fine).
jsFiddle example
Ref: How do I select an element by an ID that has characters used in CSS notation?

Uncaught Error: Syntax error, unrecognized expression. Escaping characters?

I'm trying to show a div element with the id "online-payments" if a specific radio box is selected during the checkout process.
So far I have the following:
<div id="online-payments" style="display: none;">
Test
</div>
And for the javascript:
jQuery(document).ready(function(){
jQuery("radio[#name='payment\[method\]']").click(function(){
if (jQuery("radio[#name='payment\[method\]']:checked").val() == 'checkmo')
jQuery("#online-payments").show();
});
});
This is a Magento store so im using the no-conflict mode because of the prototype libraries.
The problem comes down to the radio's name. It's payment[method] by default on Magento (I've tried to change it, but it looks like it would give me more work than I had anticipated).
So it really comes down to escaping those brackets [ ], which I thought I did, but even then it's throwing me this error:
Uncaught Error: Syntax error, unrecognized expression: radio[#name='payment[method]']
What's wrong here?

Several problems there:
You're using an attribute selector, but with an invalid name (#name). Attribute names cannot start with #.
There's also no need for the backslashes as long as you use quotes (which you are, single quotes are fine). (And the ones you have aren't ending up as part of the selector, to put a backslash in a selector when the selector is in a JavaScript string, you have to escape the backslash as \\.)
radio isn't a tag name.
Perhaps you wanted:
jQuery("input[type=radio][name='payment[method]']")
jQuery offers an extension which is :radio, but using it isn't recommended, for the reasons discussed on its API page (basically, jQuery can't hand it off to the browser's native querySelector / querySelectorAll).